Merge pull request #6 from zoosky/v3-upgrade

V3 upgrade

Author: zoosky

package.json

@@ -1,6 +1,6 @@
 {
   "name": "framework7-template-split-vue-webpack",
-  "version": "2.3.0",
+  "version": "3.1.0",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
@@ -12,12 +12,12 @@
     "release:note": "node scripts/gen-release-note.js"
   },
   "dependencies": {
-    "framework7": "^2.3.0",
-    "framework7-icons": "^0.8.9",
-    "framework7-vue": "^2.2.5",
+    "framework7": "^3.1.0",
+    "framework7-icons": "^0.9.1",
+    "framework7-vue": "^3.1.0",
     "material-design-icons": "^3.0.1",
     "register-service-worker": "^1.0.0",
-    "vue": "^2.5.2",
+    "vue": "^2.5.16",
     "vuex": "^3.0.1"
   },
   "devDependencies": {

src/App.vue

@@ -1,5 +1,6 @@
 <template>
-  <div id="app">
+ <f7-app :params="f7params">
+  
     <!-- Statusbar -->
     <f7-statusbar></f7-statusbar>
     <panel-left></panel-left>
@@ -8,10 +9,13 @@
     <home></home>
     <pop-up></pop-up>
     <login-screen></login-screen>
-  </div>
+ </f7-app>
 </template>
 
 <script>
+// Import Routes
+import Routes from "./routes.js";
+
 import Home from "./pages/home.vue";
 import PanelLeft from "./pages/panel-left.vue";
 import PanelRight from "./pages/panel-right.vue";
@@ -25,6 +29,28 @@ export default {
     PanelRight,
     PopUp,
     LoginScreen
+  },
+  data() {
+    return {
+      // Framework7 parameters here
+      f7params: {
+        id: "io.framework7.testapp", // App bundle ID
+        name: "Framework7 Split-View with Vuejs Components", // App name
+        theme: "auto", // Automatic theme detection
+        // App routes
+        routes: Routes,
+        // Enable panel left visibility breakpoint
+        panel: {
+          leftBreakpoint: 960
+        },
+        view: {
+          // configuration examples
+          iosDynamicNavbar: true, //default: true
+          xhrCache: true, //default: true
+          pushState: true //default: false
+        }
+      }
+    };
   }
 };
 </script>

src/main.js

@@ -4,65 +4,33 @@ import store from "./store";
 import "./registerServiceWorker";
 
 // Import F7
-import Framework7 from "framework7/dist/framework7.esm.bundle.js";
+import Framework7 from "framework7/framework7.esm.bundle.js";
 
 // Import F7 Vue Plugin
-import Framework7Vue from "framework7-vue/dist/framework7-vue.esm.bundle.js";
+import Framework7Vue from "framework7-vue/framework7-vue.esm.bundle.js";
 
 // Import F7 Styles
 // eslint-disable-next-line
-import Framework7Styles from "framework7/dist/css/framework7.css";
+import Framework7Styles from "framework7/css/framework7.css";
 
 // Import Icons and App Custom Styles
 // eslint-disable-next-line
 import IconsStyles from "./assets/css/icons.css";
 // eslint-disable-next-line
 import AppStyles from "./assets/css/app.css";
 
-// Import Routes
-import Routes from "./routes.js";
-
 // Init F7 Vue Plugin
-Vue.use(Framework7Vue, Framework7);
+Framework7.use(Framework7Vue);
 
 Vue.config.productionTip = false;
 
 new Vue({
-  // Init Framework7 by passing parameters here
-  framework7: {
-    id: "io.framework7.testapp", // App bundle ID
-    name: "Framework7 Split-View with Vuejs Compnents", // App name
-    theme: "auto", // Automatic theme detection
-    // App routes
-    routes: Routes,
-    // Enable panel left visibility breakpoint
-    panel: {
-      leftBreakpoint: 960
-    },
-    view: {
-      // configuration examples
-      iosDynamicNavbar: true, //default: true
-      xhrCache: true, //default: true
-      pushState: true //default: false
-    }
-  },
   store,
-  methods: {
-    onF7Ready(f7) {
-      // do some f7 related logic
-      // f7.dialog.alert("App initialized");
+  mounted() {
+    this.$f7ready(f7 => {
+      f7.dialog.alert("Component mounted");
       console.log("App initialized", f7, "Utils", this.$utils);
-    },
-    onF7RouteChange(newRoute, previousRoute, router) {
-      console.log(
-        "newRoute: ",
-        newRoute,
-        ", previousRoute: ",
-        previousRoute,
-        ", router: ",
-        router
-      );
-    }
+    });
   },
   render: h => h(App)
 }).$mount("#app");