Changes to include the nativescript-vue-navigator for native navigation

Author: msaelices

generator/index.js

@@ -114,6 +114,14 @@ module.exports = async (api, options, rootOptions) => {
     //
   }
 
+  if (rootOptions.router) {
+    api.extendPackage({
+      dependencies: {
+        'nativescript-vue-navigator': '^0.0.3'
+      }
+    });
+  }
+
   if (api.hasPlugin('typescript')) {
     api.extendPackage({
       dependencies: {},

generator/templates/simple/src/App.vue

@@ -56,9 +56,6 @@
 <script>
 <%_   if (!rootOptions.router) { _%>
   import HelloWorld from '~/components/HelloWorld';
-<%_   } else { _%>
-  import Home from '~/views/Home';
-  import About from '~/views/About';
 <%_   } _%>
 
 <%_   if (!rootOptions.router) { _%>
@@ -84,10 +81,13 @@
     methods: {
 <%_   if (rootOptions.router) { _%>
       goToHomePage() {
-        this.$navigateTo(Home);
+        this.goTo('home');
       },
       goToAboutPage() {
-        VUE_APP_MODE == 'web' ? this.$router.push('about') : this.$navigateTo(About);
+        this.goTo('about');
+      },
+      goTo(route) {
+        VUE_APP_MODE === 'web' ? this.$router.push(route) : this.$navigator.navigate(route);
       }
 <%_   } _%>
     }
@@ -99,9 +99,6 @@
   import { Component, Vue } from 'vue-property-decorator';
 <%_ if (!rootOptions.router) { _%>
   import HelloWorld from '~/components/HelloWorld.vue';
-<%_ } else { _%>
-  import Home from '~/views/Home.vue';
-  import About from '~/views/About.vue';
 <%_ } _%>
 
 <%_   if (!rootOptions.router) { _%>
@@ -125,12 +122,17 @@
 <%_ } _%>
 
 <%_ if (rootOptions.router) { _%>
+
     public goToHomePage() {
-      Vue.prototype.$navigateTo(Home);
+      this.goTo('home');
     }
 
     public goToAboutPage() {
-      VUE_APP_MODE === 'web' ? this.$router.push('about') : Vue.prototype.$navigateTo(About);
+      this.goTo('about');
+    }
+
+    public goTo(route) {
+      VUE_APP_MODE === 'web' ? this.$router.push(route) : this.$navigator.navigate(route);
     }
 <%_ } _%>
   }

generator/templates/simple/src/main.native.js

@@ -13,7 +13,12 @@ import Vue from 'nativescript-vue';
 <%# END_REPLACE %>
 
 <%# REPLACE %>
+import Navigator from 'nativescript-vue-navigator'
+
 import App from './App.vue';
+import { options } from './router';
+
+Vue.use(Navigator, { routes: options.routes })
 <%# END_REPLACE %>
 
 <%# REPLACE %>
@@ -25,7 +30,7 @@ Vue.config.silent = false;
 <%# END_REPLACE %>
 
 <%# REPLACE %>
-(h) => h('frame', [h(App)]),
+(h) => h(App),
 <%# END_REPLACE %>
 
 <%# REPLACE %>

generator/templates/simple/src/router.js

@@ -3,7 +3,8 @@ extend: '@vue/cli-service/generator/router/template/src/router.js'
 replace:
   - !!js/regexp /import Vue from 'vue'/
   - !!js/regexp /import Router from 'vue-router'/
-  - !!js/regexp /Vue.use\(Router\)/   
+  - !!js/regexp /Vue.use\(Router\)/
+  - !!js/regexp /export default new Router\(\{/
   - !!js/regexp /import Home from './views/Home.vue'/
   - !!js/regexp /'./views/About.vue'\)/
   - !!js/regexp /\}\)/
@@ -21,6 +22,10 @@ import Router from 'vue-router';
 Vue.use(Router);
 <%# END_REPLACE %>
 
+<%# REPLACE %>
+export const options = {
+<%# END_REPLACE %>
+
 <%# REPLACE %>
 import Home from '~/views/Home.vue';
 <%# END_REPLACE %>
@@ -30,5 +35,6 @@ import Home from '~/views/Home.vue';
 <%# END_REPLACE %>
 
 <%# REPLACE %>
-});
-<%# END_REPLACE %>
+};
+export default new Router(options);
+<%# END_REPLACE %>