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 files from Framework7-Vue GitHub repository.

• Install From NPM

  We can also install Framework7-Vue from NPM:

  $ npm install framework7-vue

From the downloaded package we will need files from dist/ folder

ES Module

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

import Framework7Vue from 'framework7-vue'

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

<!-- some-component.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/dist/framework7-vue.esm.bundle.js';

App HTML Layout

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