Framework7-Vue Starter

HTML

<script src="https://unpkg.com/framework7@%5E5/js/framework7.bundle.min.js"></script>
<script src="https://unpkg.com/framework7-vue@%5E5/framework7-vue.bundle.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/framework7@%5E5/css/framework7.bundle.min.css">
<div id="app">
  <f7-app :params="f7params">
    <!-- Statusbar -->
    <f7-statusbar></f7-statusbar>

    <!-- Main View -->
    <f7-views tabs class="safe-areas">

      <!-- Tabbar for switching views-tabs -->
      <f7-toolbar tabbar bottom>
        <f7-link tab-link="#view-page-a" tab-link-active>
          Page A
        </f7-link>
        <f7-link tab-link="#view-page-b">
          Page B
        </f7-link>
      </f7-toolbar>

      <!-- Your main view/tab, should have "view-main" class. It also has "tab-active" class -->
      <f7-view id="view-page-a" name="view-page-a" tab main tab-active url="/"></f7-view>
      <f7-view id="view-page-b" name="view-page-b" tab url="/page-b/"></f7-view>

    </f7-views>
  </f7-app>
</div>

<!-- Page A Template -->
<template id="page-a">
  <f7-page name="page-a">
    <f7-navbar large>
      <f7-nav-title>Page A</f7-nav-title>
      <f7-nav-title-large>Page A</f7-nav-title-large>
      <f7-subnavbar :inner="false">
        <f7-searchbar />
      </f7-subnavbar>
    </f7-navbar>

    <f7-block strong>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempus vel augue at sodales. Pellentesque facilisis pretium tellus eu aliquam. Quisque aliquet tortor orci, eget condimentum tellus consequat quis. Integer pellentesque, nibh sit amet cursus eleifend, purus sapien tempus odio, ut mollis libero lacus sit amet dolor. Vestibulum non vehicula ipsum. Aenean dignissim, augue ut ullamcorper varius, dolor dolor bibendum neque, vitae euismod sapien nulla nec nulla. Vivamus eu enim porta, consectetur eros nec, ultrices mauris. Ut varius purus tristique lectus pharetra luctus. Proin ultrices a est id venenatis. Vivamus convallis neque et ante...

JavaScript

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

// Init Page Components
Vue.component('page-a', {
  template: '#page-a'
});
Vue.component('page-b', {
  template: '#page-b'
});
Vue.component('page-c', {
  template: '#page-c'
});
Vue.component('page-d', {
  template: '#page-d'
});
Vue.component('page-not-found', {
  template: '#page-not-found'
});

// Init App
new Vue({
  el: '#app',
  data() {
  	return {
		  // Framework7 params here
    	f7params: {
      	root: '#app', // App root element
        id: 'io.framework7.testapp', // App bundle ID
        name: 'Framework7', // App name
        theme: 'ios', // Automatic theme detection
        // App routes
        routes: [
          {
            path: '/',
            component: 'page-a'
          },
          {
            path: '/page-b/',
            component: 'page-b'
          },
          {
            path: '/page-c/',
            component: 'page-c'
          },
          {
            path: '/page-d/',
            component: 'page-d'
          },
          {
            path: '(.*)',
            component: 'page-not-found',
          },
        ],
      }
    }
  },
});