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.

Plain Initialization Structure

Let’s look at the simple plain app structure, where we don’t use any bundlers in our app, just a plain html + js files. Full layout again, but with script:

  1. <!-- index.html -->
  3. <!DOCTYPE html>
  4. <html>
  5.   <head>
  6.     <!-- ... metas and styles ... -->
  7.     <link rel="stylesheet" href="path/to/framework7.bundle.min.css">
  8.   </head>
  9.   <body>
  10.     <!-- App Root Element -->
  11.     <div id="app">
  12.       <!-- Main Framework7 App component where we pass Framework7 params -->
  13.       <f7-app :params="$root.f7params">
  15.         <f7-view main>
  16.           <!-- Initial Page -->
  17.           <f7-page>
  18.             <f7-navbar title="Awesome App"></f7-navbar>
  19.             <f7-toolbar bottom>
  20.               <f7-link>Link 1</f7-link>
  21.               <f7-link>Link 2</f7-link>
  22.             </f7-toolbar>
  23.             <p>Page content goes here</p>
  24.             <f7-link href="/about/">About App</f7-link>
  25.           </f7-page>
  26.         </f7-view>
  27.       </f7-app>
  28.     </div>
  29.     <script type="text/javascript" src="path/to/vue.min.js"></script>
  30.     <script type="text/javascript" src="path/to/framework7.bundle.min.js"></script>
  31.     <script type="text/javascript" src="path/to/framework7-vue.bundle.min.js"></script>
  32.     <script type="text/javascript" src="path/to/my-app.js"></script>
  33.   </body>
  34. </html>
  1. /* my-app.js */
  3. // First of all, we need to initialize/enable Framework7 Vue plugin:
  4. // We need to pass Framework7Vue plugin to Framework7's .use() method
  5. Framework7.use(Framework7Vue);
  7. // Init Vue App
  8. new Vue({
  9.   // App Root Element
  10.   el: '#app',
  12.   // App root data
  13.   data() {
  14.     return {
  15.       // Framework7 parameters that we pass to <f7-app> component
  16.       f7params: {
  17.         // Array with app routes
  18.         routes: [...]
  19.         // App Name
  20.         name: 'My App',
  21.         // App id
  22.         id: 'com.myapp.test',
  23.         // ...
  24.       }
  25.     };
  26.   },
  27.   // App root methods
  28.   methods: {
  29.     // ....
  30.   }
  31. })

ES Modules

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

  1. <!-- index.html -->
  3. <!DOCTYPE html>
  4. <html>
  5.   <head>
  6.     <!-- ... metas and styles ... -->
  7.     <link rel="stylesheet" href="path/to/framework7.bundle.min.css">
  8.   </head>
  9.   <body>
  10.     <!-- App Root Element -->
  11.     <div id="app"></div>
  12.     <script type="text/javascript" src="path/to/my-app.js"></script>
  13.   </body>
  14. </html>
  1. /* my-app.js */
  3. // Import Vue
  4. import Vue from 'vue'
  6. // Import F7 Bundle
  7. import Framework7 from 'framework7/framework7-lite.esm.bundle.js'
  9. // Import F7-Vue Plugin Bundle (with all F7 components registered)
  10. import Framework7Vue from 'framework7-vue/framework7-vue.esm.bundle.js'
  12. // Init F7-Vue Plugin
  13. Framework7.use(Framework7Vue);
  15. // Import Main App component
  16. import App from './app.vue';
  18. // Init App
  19. new Vue({
  20.   el: '#app',
  21.   render: (h) => h(App),
  22.   // ...
  23. });
  1. <!-- app.vue -->
  3. <template>
  4.   <!-- Main Framework7 App component where we pass Framework7 params -->
  5.   <f7-app :params="f7params">
  6.     <!-- initial page is specified in routes.js -->
  7.     <f7-view main url="/"></f7-view>
  8.   </f7-app>
  9. </template>
  10. <script>
  11.   import routes from './routes.js';
  13.   export default {
  14.     data() {
  15.       return {
  16.         // Framework7 parameters that we pass to <f7-app> component
  17.         f7params: {
  18.           // Array with app routes
  19.           routes,
  20.           // App Name
  21.           name: 'My App',
  22.           // App id
  23.           id: 'com.myapp.test',
  24.           // ...
  25.         }
  26.       }
  27.     }
  28.   }
  29. </script>

In the examples above:

  • we pass Framework7 parameters to the f7-app main Framework7 app component in its params property;
  • element passed in Vue’s el parameter 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.

← App Layout

Vue Component Extensions →