Nativescript-Vue-Dynamo

Nativescript-Vue-Dynamo is a dynamic component router implementation that is suitable for NativeScript-Vue.

It uses Vue Dynamic Components to simulate the normal navigation patterns of a Nativescript-Vue app. It does this by plugging into Vue-Router and Vuex. This implementation also supports "Child Routes" by using the same Dynamic Component behavior, in a nested manner, to allow you to navigate within the parent/child routes.

To be clear: we are not actually using the underlying mechanics of Vue-Router to navigate through the app as this has been problematic issue when trying to use Nativescript-Vue historically. However, we are doing things like plugging into the main Route Config as a common shared configuration and then using a router.afterEach hook to update the route history that we are keeping in the state manager. When the route history state changes, the dynamic components will cause the app to load a new route or Page. This effectively mimcs normal navigation patterns.

A further point must be made: we are also not using the underlying mechanics of Nativescript-Vue to navigate. There is no $navigateTo or $navigateBack going on. Thus, we keep something similar to Nativescript's navigation stack inside of our state manager so that we can track forwards and backwards movement as needed.

This project takes many of the same ideas in Vuex-Router-Sync and Nativescript-Vue-Navigator and combines them in a way that simulates the traditional routing experience withing a Nativescript-Vue app.

Quick Start

npm install --save nativescript-vue-dynamo

Main entry point (main.js or main.native.js)

import Vue from 'nativescript-vue';
import App from './App.vue';
import store from './store';
import router, { routes } from './router';

import Dynamo from 'nativescript-vue-dynamo';
Vue.use( Dynamo, {
  store,
  router,
  routes,
});

Vue-Router Config

Inside or your Vue-Router config, you will want to split out your route config into it's own array as modeled below. You can then use many of the extra options provided by Vue-Router out of the box such as adding the meta object. Most built in router hooks should be available to help assist you as well. Notice the routeHistoryName in the meta tags for all routes. Also, for child routes, notice the parentRouteHistor