upgraded to Framework7 v3

Author: Jasoncckit

src/app.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- App -->
-  <div id="app">
+  <f7-app :params="f7params">
 
     <!-- Statusbar -->
     <f7-statusbar></f7-statusbar>
@@ -60,9 +60,32 @@
       </f7-view>
     </f7-login-screen>
 
-  </div>
+  </f7-app>
 </template>
 
 <script>
-  export default {}
+  // Import Routes
+  import routes from './routes.js'
+
+  export default {
+    data () {
+      return {
+        // Framework7 parameters here
+        f7params: {
+          id: 'io.framework7.testapp', // App bundle ID
+          name: 'Framework7', // App name
+          theme: 'auto', // Automatic theme detection
+          // App routes
+          routes: routes,
+          // Any other parameters, e.g.
+          panel: {
+            swipe: 'left'
+          },
+          navbar: {
+            hideOnPageScroll: true
+          }
+        }
+      }
+    }
+  }
 </script>

src/main.js

@@ -3,16 +3,15 @@
 /* eslint-disable no-new */
 
 import Vue from 'vue'
-import Framework7 from 'framework7/dist/framework7.esm.bundle.js'
-import Framework7Vue from 'framework7-vue/dist/framework7-vue.esm.bundle.js'
+import Framework7 from 'framework7/framework7.esm.bundle.js'
+import Framework7Vue from 'framework7-vue/framework7-vue.esm.bundle.js'
 import axios from 'axios'
-import Routes from './routes.js'
 import App from './app'
-import Framework7Styles from 'framework7/dist/css/framework7.css'
+import Framework7Styles from 'framework7/css/framework7.css'
 import AppStyles from './css/app.less'
 
 Vue.config.productionTip = false
-Vue.use(Framework7Vue, Framework7)
+Framework7.use(Framework7Vue)
 
 new Vue({
   el: '#app',
@@ -27,21 +26,5 @@ new Vue({
       AppStyles: AppStyles,
       axios: axios
     }
-  },
-  // Init Framework7 by passing parameters here
-  framework7: {
-    id: 'me.appbase.testapp', // App bundle ID
-    name: 'Appbase', // App name
-    theme: 'auto', // Automatic theme detection
-    routes: Routes,
-    // Any other parameters, e.g.
-    panel: {
-      swipe: 'left',
-      leftBreakpoint: 1216,
-      rightBreakpoint: 1408
-    },
-    navbar: {
-      hideOnPageScroll: true
-    }
   }
 })

src/pages/panel-right.vue

@@ -1,7 +1,7 @@
 <template>
   <f7-page>
-    <f7-navbar title="Right Panel" sliding></f7-navbar>
-    <f7-block>
+    <f7-navbar title="Right Panel"></f7-navbar>
+    <f7-block strong>
       <p>Right panel content goes here</p>
     </f7-block>
     <f7-block-title>Load page in panel</f7-block-title>