Framework7 Vue Package Structure

Package

Framework7 Vue package contains the following files and folders:

framework7-vue/
    bundle/
    cjs/
      components/
        accordion.js
        accordion-content.js
        ...
      framework7-vue-bundle.js
      framework7-vue.js
    components/
        accordion/
          package.json
        accordion-item/
          package.json
        ...
    esm/
      components/
        accordion.js
        accordion-content.js
        ...
      framework7-vue-bundle.js
      framework7-vue.js

Vue Plugin

Framework7 Vue plugin provided as ES/CJS module:

// Import Framework7 Core
import Framework7 from 'framework7/lite';
/*
Or import bundle with all components:
import Framework7 from 'framework7/lite-bundle';
*/

// Import Framework7 Vue
import Framework7Vue from 'framework7-vue';

// Init plugin
Framework7.use(Framework7Vue)

By default it exports only Framework7-Vue plugin without any Vue components. To import components separately, we need to use named import:

<template>
  <f7-app>
    <f7-view>
      ...
    </f7-view>
  </f7-app>
</template>
<script>
import { f7App, f7View } from 'framework7-vue';

export default {
  components: {
    f7App,
    f7Navbar,
  },
  ...
}
</script>

Bundle

If you need to include all Framework7-Vue components, we can include its another script bundle with all Vue components registered:

// Import Vue
import { createApp } from 'vue';

// Import Framework7 Bundle
import Framework7 from 'framework7/lite-bundle';

// Import Framework7-Vue with helper to register all components
import Framework7Vue, { registerComponents } from 'framework7-vue/bundle';

// Import your main app component
import App from 'path/to/app.vue';

// Init plugin and register all components
Framework7.use(Framework7Vue);

// create Vue app
const app = createApp(App);

// register all Framework7 Vue components by passing Vue app instance there
registerComponents(app);