Framework7-Vue Starter

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/framework7/2.0.8/js/framework7.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/2.0.8/css/framework7.min.css">
<script src="https://unpkg.com/framework7-vue@2.0.7/dist/framework7-vue.min.js"></script>
<script src="https://unpkg.com/vue@2.5.13/dist/vue.min.js"></script>
<div id="app">
  <!-- Main View -->
  <f7-view id="main-view" main url="/home/"></f7-view>
</div>

<!-- Home Page Template -->
<template id="page-home">
  <f7-page>
    <f7-toolbar tabbar>
    <f7-link tab-link route-tab-id="tab-1" href="./" text="tab1"></f7-link>
    <f7-link tab-link route-tab-id="tab-2" href="./tab-2/" text="tab2"></f7-link>
    <f7-link tab-link route-tab-id="tab-3" href="./tab-3/" text="tab3"></f7-link>
    </f7-toolbar>
    
    <f7-tabs routable>
      <f7-tab id="tab-1"></f7-tab>
      <f7-tab id="tab-2"></f7-tab>
      <f7-tab id="tab-3"></f7-tab>
    </f7-tabs>
  </f7-page>
</template>

<!-- Tab 1 Template -->
<template id="tab-1-template">
  <div>
    <f7-block>
      <f7-link v-if="!showPanel" text="OPEN" panel-open="right"></f7-link>
      <f7-link v-else text="CLOSE" panel-close></f7-link>
    </f7-block>
    
    <f7-panel ref="panel" right cover @panel:open="showPanel = true" @panel:close="showPanel = false" @panel:backdrop-click="showPanel = false">
        Hello
    </f7-panel>
  </div>
</template>
<!-- Tab 2 Template -->
<template id="tab-2-template">
  <f7-block>Tab 2 content</f7-block>
</template>
<!-- Tab 3 Template -->
<template id="tab-3-template">
  <f7-block>Tab 3 content</f7-block>
</template>

JavaScript

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

// Init Page Components
Vue.component('page-home', {
  template: '#page-home'
});
Vue.component('tab-1-component', {
  template: '#tab-1-template',
  data() {
    return {
			showPanel: false
    }
  },
  beforeDestroy() {
		this.$refs.panel.f7Panel.close(false);
  },
});
Vue.component('tab-2-component', {
  template: '#tab-2-template'
});
Vue.component('tab-3-component', {
  template: '#tab-3-template'
});

// Init App
new Vue({
  el: '#app',
  // Init Framework7 by passing parameters here
  framework7: {
    root: '#app', // App root element
    id: 'io.framework7.testapp', // App bundle ID
    name: 'Framework7', // App name
    theme: 'auto', // Automatic theme detection
    // App routes
    routes: [
      {
        path: '/home/',
        component: 'page-home',
        tabs: [
        	{
          	path: '/',
          	id: 'tab-1',
            component: 'tab-1-component'
          },
					{
          	path: '/tab-2/',
          	id: 'tab-2',
            component: 'tab-2-component'
          },
        	{
          	path: '/tab-3/',
          	id: 'tab-3',
            component: 'tab-3-component'
          }

        ],
      },
    ],
  }
});