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">
  <f7-view main :init="false"></f7-view>
</div>

<template id="page-home">
  <f7-page>
    <f7-navbar title="Home"></f7-navbar>
    <f7-block strong>
      <p>Here is Home page!</p>
    </f7-block>
  </f7-page>
</template>

<template id="page-login">
  <f7-page>
    <f7-navbar title="Login"></f7-navbar>
    <f7-block strong>
      <p>Here is Login page!</p>
    </f7-block>
  </f7-page>
</template>

JavaScript

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

// Init Page Components
Vue.component('page-home', {
  template: '#page-home'
});
Vue.component('page-login', {
  template: '#page-login'
});

// 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'
      },
      {
        path: '/login/',
        component: 'page-login'
      },
    ],
  },
  methods: {
  	onF7Ready(f7) {
    	var loggedIn = false;
    	if (loggedIn) {
      	f7.views.create('.view-main', { url: '/home/' })
      } else {
      	f7.views.create('.view-main', { url: '/login/' })
      }
    	
    },
  },
});