Correct way to import individual framework7 vue components

Questions
1

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:

//app.js
import Framework7 from 'framework7';
import Framework7Vue from 'framework7-vue';
import App from '../components/app.vue';
Framework7.use(Framework7Vue);

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

  components: {
    app: App,
  },
});

//somePage.vue
<script>
  import { f7ListInput } from 'framework7-vue';
  //..
  export default {
    components: {
      //..
      f7ListInput,
    }
  }
  //..        
</script>

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,
Richard

2

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';

Framework7.use(Calendar);

https://framework7.io/docs/custom-build.html#es-modules

1 Like
3

That was it. Thanks a lot.