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">

    <!-- 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>
          Tab A
        </f7-link>
        <f7-link tab-link="#view-page-b">
          Tab 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="/" @tab:show="tabShow"></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>Tab A</f7-nav-title>
      <f7-nav-title-large>Tab A</f7-nav-title-large>
      <f7-subnavbar :inner="false">
        <f7-searchbar />
      </f7-subnavbar>
    </f7-navbar>
    <f7-swiper v-if="todos.length" pagination navigation :params="{ on: { init: swiperInit }}">
      <f7-swiper-slide v-for="todo in todos" :key="todo">
        <div>
          <p>
            {{ todo }}
          </p>
          <p>
            <f7-button @click="done(todo)">Done</f7-button>
          </p>
        </div>
      </f7-swiper-slide>
    </f7-swiper>
    <div v-else>
      <p>
        No more tasks
      </p>
      <p>
        <f7-button @click="addTodo">Add Todo</f7-button>
      </p>
    </div>
  </f7-page>
</template>

<!-- Page B Template -->
<template id="page-b">
  <f7-page name="page-b">
    <f7-navbar title="Tab B" back-link="Back"></f7-navbar>
    <f7-list>
      <f7-list-item v-for="todo in...

CSS

.swiper-container {
  height: 100%;
}
.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

JavaScript

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

// Init Page Components
Vue.component('page-a', {
  template: '#page-a',
  computed: {
    todos() {
      let todos = [];
      this.$f7.data.todos.forEach((todo) => {
        if (!todo.completed) {
          todos.push(todo.value);
        }
      })
      return todos;
    }
  },
  methods: {
    addTodo() {
      this.$f7.data.currentTodo++;
      this.$f7.data.todos.push({
        value: "Todo " + this.$f7.data.currentTodo,
        completed: false
      })
    },
    done(todoName) {
      this.$f7.data.todos.forEach((todo) => {
        if (todo.value === todoName) todo.completed = true;
      })
    },
    swiperInit() {
      console.log("swiper init");
    }
  }
});
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

        data() {
          return {
            todos: [{
                value: "Todo 1",
                completed: false
              },
              {
                value: "Todo 2",
                completed: false
              },
              {
                value: "Todo 3",
                completed: false
              }
            ],
            currentTodo: 3
          };
        },
        // App routes
        routes: [{
            path: '/',
            component: 'page-a'
          },
          {
            path: '/page-b/',
            component: 'page-b'
          },
          {
            path: '/page-c/',
            component: 'page-c'
          },
          {
            path: '/page-d/',
        ...