Not using bundles --> Panel issue

1

Hi, I am getting an error with the latest version when I would like to use seperate components instead of bundles. In my app.js file I am using:

import Framework7 from ‘framework7/lite’;
import Framework7Vue from ‘framework7-vue’;

In my app.vue I have the following template:

<f7-app v-bind="f7params" >

  <!-- Views/Tabs container -->

  <f7-views v-if="initialized" tabs class="safe-areas">

    <!-- Tabbar for switching views-tabs -->

    <f7-toolbar tabbar labels bottom>

      <f7-link tab-link="#view-schedule" tab-link-active icon="fal fa-calendar-alt" text="Schedule"></f7-link>

      <f7-link tab-link="#view-trade" icon="fad fa-random" text="Trade"></f7-link>

      <f7-link tab-link="#view-timeoff" icon="fal fa-umbrella-beach" text="Timeoff"></f7-link>

    </f7-toolbar>

    <!-- Your main view/tab, should have "view-main" class. It also has "tab-active" class -->

    <f7-view id="view-schedule" main tab tab-active url="/"></f7-view>

    <!-- Timeoff View -->

    <f7-view id="view-timeoff" name="timeoff" tab url="/timeoff/"></f7-view>

    <!-- Trade View -->

    <f7-view id="view-trade" name="trade" tab url="/trade/"></f7-view>

  </f7-views>

  <!-- Left panel with cover effect-->

  <f7-panel left cover>

    <f7-view url="/agentinfo/"></f7-view>

  </f7-panel>

</f7-app>

I am importing the following components:

import { f7Views, f7View, f7App, f7Toolbar, f7Link, f7Panel } from ‘framework7-vue’;

and register those in the components section.

When I run the application it crashes with the following error:

panel.js:182 Uncaught TypeError: Cannot read property ‘create’ of undefined
at EventsClass. (panel.js:182)
at EventsClass.onceHandler (events-class.js:40)
at events-class.js:102
at Array.forEach ()
at events-class.js:101
at Array.forEach ()
at EventsClass.emit (events-class.js:95)
at Framework7. (f7.js:73)
at events-class.js:102
at Array.forEach ()

As I am using source maps I can see that it crashes in the file panel.js

on this line:

f7Panel = f7.panel.create(params)

looks like it doesnt know f7 or panel…

What am I doing wrong? Do I need to import some core components?

Thanks for your help!

2

Because, you just imported Vue components, you also need to do it for core components Framework7 Custom Build | Framework7 Documentation

import Framework7 from ‘framework7/lite’;
import Panel from 'framework7/components/panel'; 

Framework7.use([Panel]);