Framework7 Vue Package Structure

• Package
• Vue Plugin
• Bundle

Package

Framework7 Vue package contains the following files and folders:

framework7-vue/
    components/
        accordion.js
        accordion.d.ts
        accordion-item.js
        accordion-item.d.js
        ...
    framework7-vue-bundle.js
    framework7-vue-bundle.d.ts
    framework7-vue.js
    framework7-vue.d.ts

Vue Plugin

Framework7 Vue plugin provided as ES 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)

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