Framework7 Vue Package Structure
Package
Framework7 Vue package contains the following files and folders:
framework7-vue/
components/
accordion-content.js
accordion-item.js
accordion-toggle.js
accordion.js
actions-button.js
actions-group.js
actions-label.js
actions.js
app.js
...
framework7-vue.bundle.js
framework7-vue.bundle.min.js
framework7-vue.esm.bundle.js
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.
import App from 'framework7-vue/components/app.js';
import Navbar from 'framework7-vue/components/navbar.js';
// register component
Vue.component('f7-app', App);
Vue.component('f7-navbar', Navbar);
Or they can be imported using named import from main file
import { f7App, f7Navbar } from 'framework7-vue';
Vue.component('f7-app', f7App);
Vue.component('f7-navbar', f7Navbar);
ES Module
Framework7 Vue plugin can be imported as an ES-next module:
// Import Vue
import Vue from 'vue';
// Import Framework7 Core
import Framework7 from 'framework7/framework7-lite.js';
/*
Or import bundle with all components:
import Framework7 from 'framework7/framework7-lite.esm.bundle.js';
*/
// Import Framework7 Vue
import Framework7Vue from 'framework7-vue';
// Init plugin
Framework7.use(Framework7Vue)
By default it exports only Framework7-Vue plugin without any components. To import components separately, we need to use named import:
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:
// Import Vue
import Vue from 'vue';
// Import Framework7 Bundle
import Framework7 from 'framework7/framework7-lite.esm.bundle.js';
// Import Framework7-Vue with all components
import Framework7Vue from 'framework7-vue/framework7-vue.esm.bundle.js';
// Init plugin and register all components
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.