App Vue Component

App Vue component is the main Framework7 app component where all the Framework7 core initialization happens and where you pass all main Framework7 parameters.

App Components

There are following components included:

  • f7-app

App Properties

PropTypeDefaultDescription
paramsobjectObject with Framework7 parameters
routesarrayArray with default routes for all views. Same as params.routes so you can use this one if you feel more comfortable with such approach
idstringApp element ID attribute

Examples

Passing all parameters in params prop

  1. <template>
  2.   <f7-app :params="f7params">
  3.     <!-- ...  -->
  4.   </f7-app>
  5. </template>
  7. <script>
  8.   import AboutPage from './about.vue';
  9.   import ServicesPage from './services.vue';
  11.   export default {
  12.     data() {
  13.       return {
  14.         f7params: {
  15.           name: 'My App',
  16.           id: 'com.myapp.test',
  17.           // routes
  18.           routes: [
  19.             {
  20.               path: '/about/',
  21.               component: AboutPage,
  22.             },
  23.             {
  24.               path: '/services/',
  25.               component: ServicesPage,
  26.             },
  27.           ],
  28.           // ... other params
  29.         }
  30.       }
  31.     }
  32.   }
  33. </script>

Passing routes in separate prop:

  1. <template>
  2.   <f7-app :params="f7params" :routes="routes">
  3.     <!-- ...  -->
  4.   </f7-app>
  5. </template>
  7. <script>
  8.   import routes from './routes';
  10.   export default {
  11.     data() {
  12.       return {
  13.         f7params: {
  14.           name: 'My App',
  15.           id: 'com.myapp.test',
  16.           // ... other params
  17.         },
  18.         // routes
  19.         routes,
  20.       }
  21.     }
  22.   }
  23. </script>

← Color Properties

Accordion →