Cannot access F7 API picker from vue

Questions
1

I’ve copied the following Vue component and inserted it into my app:

The page renders fine, but I get the following error:

TypeError: Cannot read property 'create' of undefined
    at VueComponent.onPageInit (Picker.vue?./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options:141)
    at invokeWithErrorHandling (vue.esm.js:1862)
    at VueComponent.invoker (vue.esm.js:2187)
    at invokeWithErrorHandling (vue.esm.js:1862)
    at VueComponent.Vue.$emit (vue.esm.js:3885)
    at eval (vue-component-dispatch-event.js:9)
    at Array.forEach (<anonymous>)
    at eval (vue-component-dispatch-event.js:8)
    at VueComponent.dispatchEvent (page.js:481)
    at VueComponent.onPageInit (page.js:358)

It seems like this.$f7 is missing quite a bit of API functionality. Even the following example from https://framework7.io/vue/vue-component-extensions.html did not work for me:

<template>
  ...
</template>
<script>
  export default {
    ...
    mounted() {
      this.$f7ready((f7) => {
        f7.dialog.alert('Component mounted');
      });
    },
  };
</script>
2

How do you import f7? Core or bundle?

3

I’m using ES Module import, seems to be core version:

import Framework7 from 'framework7'
import Framework7Vue from 'framework7-vue'
Framework7.use(Framework7Vue)
4

// Import framework with all components
import Framework7 from ‘framework7/framework7.esm.bundle.js’;

https://framework7.io/docs/package.html#es-module-bundle

Do the same for f7 vue. Or import the components you need

5

Thanks, both solutions worked.

For reference this is what I did to load picker with lazy modules (required the Sheet component as well, as I figured out):

// import core framework with core components only
import Framework7 from 'framework7'

// import framework7 modules/components we need on initial page
import Picker from 'framework7/components/picker/picker'
import Sheet from 'framework7/components/sheet/sheet'

// Import F7 Vue Plugin
import Framework7Vue from 'framework7-vue'

// Install additional modules
Framework7.use([Framework7Vue, Picker, Sheet])

More info on lazy modules: https://framework7.io/docs/lazy-modules.html

1 Like