Initialize App

After we have our app layout now we need to mount Vue components and initialize the app. You can read about all possible Framework7 initialization parameters in appropriate Framework7 App Parameters section.

Let's look at our script:

// First of all, we need to initialize/enable Framework7 Vue plugin:
Vue.use(Framework7Vue);

// Init Vue App
new Vue({
    // App Root Element
    el: '#app',
    // Init Framework7. All Framework7 parameters should be passed in "framework7" property, e.g.:
    framework7: {
        // App Root Element, should be the same as the component root "el"
        root: '#app',
        // Array with app routes
        routes: [...]
        // Any other parameters, e.g.
        animateNavBackIcon: true,
        swipePanel: 'left'
    },
    // App root data
    data: {
        // ....
    },
    // App root methods
    methods: {
        // ....
    }
})

If you use Webpack or Browserify, it may look like:

// Import Vue
import Vue from 'vue'

// Import F7
import Framework7 from 'framework7'

// Import F7 Vue Plugin
import Framework7Vue from 'framework7-vue'

// Import Routes
import Routes from './routes.js'

// Init F7 Vue Plugin
Vue.use(Framework7Vue)

// Init App
new Vue({
  el: '#app',
  framework7: {
    root: '#app',
    routes: Routes
  },
  // ...
});

In the examples above we pass Framework7 parameters to the Vue root component's framework7 property; we must use the same Framework7's root parameter as the el property of Vue main component.

We also must specify array with routes (if we have navigation between pages in the app). Check out information about router and routes in the Navigation Router section.

Initialized Instances

After Vue mounts the app and init Framework7, we will have access to Framework7's initialized instance and some other useful properties that will be available in all Vue components: