Framework7 Vue Package Structure

Package

Framework7 Vue package contains the following files and folders:

  1. framework7-vue/
  2.     components/
  3.         accordion-content.js
  4.         accordion-item.js
  5.         accordion-toggle.js
  6.         accordion.js
  7.         actions-button.js
  8.         actions-group.js
  9.         actions-label.js
  10.         actions.js
  11.         app.js
  12.         ...
  13.     framework7-vue.bundle.js
  14.     framework7-vue.bundle.min.js
  15.     framework7-vue.esm.bundle.js
  16.     framework7-vue.esm.js

Browser Script (UMD)

framework7-vue.bundle.js is so called UMD-format JavaScript intended to be used directly in browser (e.g. with <script src="...">) or with libraries like Require.js. It already contains all Framework7-Vue components registered.

It is not recommended to use this version for production, just for development and testing

Components

All Vue components are located in components/ folder and can be used with core (not bundle) version. These components are ES modules.

  1. import App from 'framework7-vue/components/app.js';
  2. import Navbar from 'framework7-vue/components/navbar.js';
  4. // register component
  5. Vue.component('f7-app', App);
  6. Vue.component('f7-navbar', Navbar);

Or they can be imported using named import from main file

  1. import { f7App, f7Navbar } from 'framework7-vue';
  3. Vue.component('f7-app', f7App);
  4. Vue.component('f7-navbar', f7Navbar);

ES Module

Framework7 Vue plugin can be imported as an ES-next module:

  1. // Import Vue
  2. import Vue from 'vue';
  4. // Import Framework7 Core
  5. import Framework7 from 'framework7';
  6. /*
  7. Or import bundle with all components:
  8. import Framework7 from 'framework7/framework7.esm.bundle.js';
  9. */
  11. // Import Framework7 Vue
  12. import Framework7Vue from 'framework7-vue';
  14. // Init plugin
  15. Framework7.use(Framework7Vue)

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

  1. import { f7App, f7Navbar } from 'framework7-vue';

ES Module Bundle

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

  1. // Import Vue
  2. import Vue from 'vue';
  4. // Import Framework7 Bundle
  5. import Framework7 from 'framework7/framework7.esm.bundle.js';
  7. // Import Framework7-Vue with all components
  8. import Framework7Vue from 'framework7-vue/framework7-vue.esm.bundle.js';
  10. // Init plugin and register all components
  11. Framework7.use(Framework7Vue);

ES-Next

Note, that Framework7 and Framework7-Vue ES modules are in ES-next syntax, so don’t forget to enable/configure your Babel/Buble to transpile them as well, as well as template7, dom7 and ssr-window modules that used as dependencies.