Navigation, which often depends on a router, is often tricky in a mobile app. Should you use a side drawer for links to various pages, or should you create a tabbed interface to make your pages more visible? And what about the actual routing of your app? For nested pages, like in a master-detail page, you might want to include a back arrow in your ActionBar.

Most Vue.js apps rely on the Vue Router. Unfortunately, it's not supported for NativeScript-Vue apps, due to the nature of navigating on the web vs. navigating on mobile. There are other strategies more appropriate for mobile development, such as the NativeScript-Vue-Navigator plugin and techniques of manual routing.

For our purposes, we are going to go a 'third route' for our routing, and that is to load a stack of screens that will be reused ad hoc.

Everything got all dark and gloomy! This is good. Note the use of a css gradient, giving visual interest to the background.

Note the use of the GridLayout. This is probably the most useful and flexible layout module in NativeScript. You can control how rows and columns handle the display of their content by setting the children to * or auto or a pixel value in width. NativeScript layouts are quite different from the web html you might be used to. For a tutorial, visit nslayouts.

Add a comma after the data() method, and then add a components property so that the components are able to be referenced programmatically:

components:{
CardOfTheDay, CardList, Reading
}

Then, you need to reference an initial view to show as well as an array of these views with which the user can interact. Replace the returned data object (return {};) with the following currentComponent string and a componentsArray:

We're going to simulate a tab navigator with three icons by creating a GridLayout with some styles.

Why not a real tabnav? By default, the TabNavigation on Android looks considerably different than on iOS - it's at the top, rather than at the bottom. For this app design, we need something a bit more custom.

If you look carefully at our GridLayout, the numbers don't quite add up. Note the row of these items. If the logo image is listed as row 0, and the buttons are all on row 2, we're missing row 1. That's going to be the stack of components, so let's add those now. Add a component right into the markup under the logo:

At this point you should see three purple buttons at the bottom of the screen and some white text in the middle.

There's some fancy stuff going on here.

The component on row 1 is made up of components within the componentsArray that we created earlier. They are rendered sequentially via v-for.

In addition, a component should only be shown if it's the currentComponent (which, now, is CardOfTheDay).

There's also the shorthand :is which is a special attribute of a dynamic component. Such a component can change when the current view changes, in our architecture.

To test that the stack of components shows a given view, edit the <Label text> in each of the components to reference the name of the component (for example <Label text="Reading" />). Clicking on the purple buttons at the bottom should let your views cycle.

Now that the stack of views is showing as requested, let's change the styles of the buttons programmatically as well to enhance the usability of the app.

Now, you see some unintelligible symbol in the buttons, and they're no longer purple. That's because we haven't added the fonticon fonts yet!

In the root of your app, let's add all the fonts we're going to need:

Download them here to your local machine, unzip the folder, and then in the Playground, select the app folder and click Upload folder in the small dot menu on the right. Choose the fonts directory inside the archive you just unzipped (the directory that contains the four font files). If all goes well, you will have uploaded a fonts folder with four font files.

To get the fonts to show in your app, you need to use a computed property and a dynamic class.

Computed properties are important elements of many Vue.js apps. They are functions that can calculate a value and return data that will be used in your template. In our case, our computed property will assign a css class depending on whether the current view aligns to the the button selected as well as bind css classes to the button programmatically.

First, add a computed property under the last comma of the data method:

All the buttons are computed as "fa nav-btn", but depending on the selected component, one more class, "purple", will be added or removed. To make this work, add a binded property to each button's class, such that your buttons now look like this:

Now, your buttons should start to look nice! The fonticon is colored gray and has no background when the selected view does not correlate to it, but when it does, the icon is white and the button is a nice purple.