Correct way to import individual framework7 vue components

Instead of importing the whole bundle as the webpack template app does, I’m trying to import only the components I want using in this way:

import Framework7 from 'framework7';
import Framework7Vue from 'framework7-vue';
import App from '../components/app.vue';

new Vue({
  el: '#app',
  render: (h) => h(App),

  components: {
    app: App,

  import { f7ListInput } from 'framework7-vue';
  export default {
    components: {

It is working just fine for me except for the f7-list-input when used with a datepicker type. I’m getting the following error:

TypeError: Cannot read property 'create' of undefined at eval (list-input.js:334)

Line 334 from list-input.js says:

self.f7Calendar = f7.calendar.create(Object.assign({....

Which means f7.calendar hasn’t been initialized by that time.

Is there something I’m missing here?
Am I using the correct way to import individual components to my app?

I should say that I’m not getting this error when importing the bundle versions from f7 and f7-vue as the webpack template app does:

import Framework7 from 'framework7/framework7.esm.bundle.js'
import Framework7Vue from 'framework7-vue/framework7-vue.esm.bundle.js' 

Any hints?

Thanks in advance,

You also need to configure core modules if you are not using bundle:

import Framework7 from 'framework7';
import Calendar from 'framework7/components/calendar/calendar.js';


1 Like

That was it. Thanks a lot.