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.

Assuming you use Webpack, Rollup or another bundler with ES-next modules support, we may have the following structure:

<!-- index.html -->

<!DOCTYPE html>
<html>
  <head>
    <!-- ... metas and styles ... -->
    <link rel="stylesheet" href="path/to/framework7-bundle.min.css">
  </head>
  <body>
    <!-- App Root Element -->
    <div id="app"></div>

    <!-- Scripts will be auto injected -->
  </body>
</html>

/* my-app.js */

import { createApp } from 'vue'

// Import F7 Bundle
import Framework7 from 'framework7/lite-bundle'

// Import F7-Vue Plugin Bundle (with all F7 components registered)
import Framework7Vue, { registerComponents } from 'framework7-vue/bundle'

// Init F7-Vue Plugin
Framework7.use(Framework7Vue);

// Import Main App component
import App from './app.vue';

// Init App
const app = createApp(App);

// Register all Framework7 Vue components
registerComponents(app);

// Mounte Vue App
app.mount('#app');

<!-- app.vue -->

<template>
  <!-- Main Framework7 App component where we pass Framework7 params -->
  <f7-app v-bind="f7params">
    <!-- initial page is specified in routes.js -->
    <f7-view main url="/"></f7-view>
  </f7-app>
</template>
<script>
  import routes from './routes.js';

  export default {
    data() {
      return {
        // Framework7 parameters that we pass to <f7-app> component
        f7params: {
          // Array with app routes
          routes,
          // App Name
          name: 'My App',
          // ...
        }
      }
    }
  }
</script>

In the examples above:

we pass Framework7 parameters to the f7-app main Framework7 app component in its properties;
root element passed to Vue's createApp will be used as Framework7 root element

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

Improve this Doc

On this page