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:

                 $ 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:

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:

<!-- some-page.vue -->
<template>
  ...
</template>
<script>
  // Import F7 components you need
  import { f7List, f7ListItem, f7Navbar } from 'framework7-vue';

  export default {
    // register F7 Vue components in required Vue component
    components: {
      f7List,
      f7ListItem,
      f7Navbar,
    }
  }
</script>

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 framework with all components
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.