"dependencies": {
    "nativescript-vue": "^2.2.0",
    "tns-core-modules": "^5.2.2",
    "vue": "^2.6.10",
    "vue-router": "^3.0.2",
    "vuex": "^3.1.0"
  },

import Vue from 'vue';
import App from '~/App.vue';
import router from './router';
import store from './store';

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: (h) => h(App)
}).$mount('#app');

import Vue from 'nativescript-vue';
import App from './App.vue';
import store from './store';

Vue.config.silent = false;

new Vue({
  store,
  render: (h) => h('frame', [h(App)])
}).$start();

<template web>
  <div class="w-page">
    <nav>
      <ul class="w-navbar">
        <li class="w-title">{{navbarTitle}}</li>
      </ul>
    </nav>
    <div class="w-container">
      <router-link tag="button" class="w-button" id="homeButton" to="/">Home</router-link>
      <button class="w-button" id="aboutButton" v-on:click="goToAboutPage">About</button>
      <router-view/>
    </div>
  </div>
</template>

<template native>
  <Page>
    <ActionBar :title="navbarTitle"/>
    <GridLayout rows="auto, auto">
      <Button text="Home" @tap="goToHomePage" row="0"/>
      <Button text="About" @tap="goToAboutPage" row="1"/>
    </GridLayout>
  </Page>
</template>

ActionBar
  color #42b983

.w-navbar
  color #42b983
  position fixed
  z-index 10000
  height 3em
  width 100%
  top 0px
  left 0px
  margin auto
  list-style none
  display flex
  align-items center
  padding 0 10px
  -webkit-box-shadow -8px 8px 6px -7px #999
  -moz-box-shadow -8px 8px 6px -7px #999
  box-shadow -8px 8px 6px -7px #999

import VueDevtools from 'nativescript-vue-devtools';

Vue.use(VueDevtools);

npm install --save @vue/devtools 
    nativescript-toasty nativescript-socketio nativescript-vue-devtools