ns-vue-nami

Router companion for Nativescript-Vue 2.0's Manual Routing.

Yep, that's her, Nami from One Piece. Why? Coz she's a navigator.

Installation

npm

npm install ns-vue-nami

yarn

yarn add ns-vue-nami

Recommended Implementation

Create a router folder with an index.js file within your app folder.

app
|- components
|- router
   |- index.js

index.js

import Vue from 'nativescript-vue';
import NsVueNami from 'ns-vue-nami';
import login from '~/components/login';
import dashboard from '~/components/dashboard';
import isAuthenticated from 'some-authentication-module';

Vue.use(NsVueNami);

const vm = new Vue();

vm.$nami.authGuard((next) => {
  if(isAuthenticated) {
    next();
  } else {
    next('login');
  }
});

// register all routes here.
vm.$nami.init({
  routes: [
    {
      name: 'login',
      component: login,
      noAuth: true,
      entry: !isAuthenticated
    },
    {
      name: 'dashboard',
      component: dashboard,
      entry: isAuthenticated
    }
  ]
});

main.js

Just invoke the router in your main.js.

import '@babel/polyfill';
import entry from './router';

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

Please note the import of the babel/polyfill above, this might be necessary to avoid this bug: NativeScript encountered a fatal error: ReferenceError: Can't find variable: regeneratorRuntime you can install the polyfill by running npm install --save-dev @babel/polyfill and importing it as seen above.

Sample Usage

From the template

<button @tap="$nami.navigate('foo')">Go to foo</button>

From script

export default {
  methods: {
    someFunc() {
      this.$nami.navigate('bar');
    }
  }
}

API

.init()

Sets all the routable components across the whole app. Returns the entry component to be used in main.js as frame entry.

Router properties:

1. name: String - The component name of your choice.
2. component: Vue component - The vue component.
3. noAuth: Boolean: default - false - The component will NOT require authentication if set to true.
4. entry: Boolean - Set a particular component as entry point.

import login from '~/components/login';
import dashboard from '~/components/dashboard';

vm.$nami.init({
  routes: [
    {
      name: 'login',
      component: login,
      entry: true
    },
    {
      name: 'dashboard',
      component: dashboard
    }
  ]
})

.authGuard()

Will decide whether the component is routable or not based on authentication status.

import Vue from 'nativescript-vue';
import NsVueNami from '../plugins/ns-vue-nami';

import login from '~/components/login';
import dashboard from '~/components/dashboard';

// Dummy authentication status.
const isAuthenticated = true;

Vue.use(NsVueNami);

const vm = new Vue();

vm.$nami.authGuard((next) => {
  if(isAuthenticated) {
    next();
  } else {
    next('login');
  }
});

export default vm.$nami.init({
  routes: [
    {
      name: 'login',
      component: login,
      noAuth: true,
      entry: !isAuthenticated // login will be the entry if isAuthenticated is false
    },
    {
      name: 'dashboard',
      component: dashboard,
      entry: isAuthenticated // dashboard will be the entry if isAuthenticated is true
    }
  ]
});

.register()

Adds a new route to the list of routes on the fly.

import cat from '~/components/cat';

vm.$nami.register({name: 'cat', component: cat});

.navigate()

// Basic
this.$nami.navigate('cat-component');

// With props
this.$nami.navigate('cat-component', {name: 'Kidlat', color: 'Black'});

<button @tap="$nami.navigate('cat-component', {name: 'Kidlat', color: 'Black'})">View Cat</button>

.modal()

Just like .navigate() but shows the component on a modal.

// Basic
this.$nami.modal('cat-component');

// With props
this.$nami.modal('cat-component', {name: 'Kidlat', color: 'Black'});

<button @tap="$nami.modal('cat-component', {name: 'Kidlat', color: 'Black'})">View Cat in a Modal</button>

.back()

Goes back to the previous component.

this.$nami.back();

<button @tap="$nami.back()">Go back</button>