Framework7 Vue Package Structure

    Browser Script (UMD)

    is so called -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

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

    Or they can be imported using named import from main file

    ES Module

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

    1. // Import Vue
    2. import Vue from 'vue';
    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
    13. // Init plugin
    14. Framework7.use(Framework7Vue)

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

    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, and ssr-window modules that used as dependencies.