Installation

It is really easy to build your app with Framework7 and Vue. To get started we need to install Framework7, Vue, Framework7-Vue plugin. You can skip this step and use one of the ready to use starter app templates.

1. Install Framework7

First of all we need to install Framework7 library itself.

2. Install Vue

Read about how to install Vue on the official Vue Installation Guide.

3. Install Framework7-Vue Plugin

Now we need the Framework7-Vue plugin for Vue, we can do it with two ways:

  • Download From GitHub Repository

    We can download required Framework7-Vue files from Framework7 GitHub repository.

  • Install From NPM

    We can also install Framework7-Vue from NPM:

    1.              $ npm install framework7-vue

ES Module

This feature currently can be used in bundlers like Webpack and Rollup

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

  1. import Framework7Vue from 'framework7-vue'

By default it exports only core Framework7-Vue plugin without any components.

And if you need additional components they must be imported additionally:

  1. <!-- some-page.vue -->
  2. <template>
  3.   ...
  4. </template>
  5. <script>
  6.   // Import F7 components you need
  7.   import { f7List, f7ListItem, f7Navbar } from 'framework7-vue';
  9.   export default {
  10.     // register F7 Vue components in required Vue component
  11.     components: {
  12.       f7List,
  13.       f7ListItem,
  14.       f7Navbar,
  15.     }
  16.   }
  17. </script>

ES Module Bundle

If you need to include all Framework7-Vue components, we can include a different script bundle which includes all Vue components:

  1. // Import framework with all components
  2. import Framework7Vue from 'framework7-vue/framework7-vue.esm.bundle.js';

App HTML Layout

Now when we have downloaded/installed Framework7-Vue, we can start from creating App Layout.