written by Andre Liem
31/05/2018

Getting Started with building Mobile Apps with NativeScript and Vue.js

NativeScript is a framework to build mobile iOS and Android applications with JavaScript. It's free to use and has a Vue.js starter kit to get you going fast. In this tutorial, I will walk you through getting started with NativeScript + Vue using the guide and focusing on building a sample iOS app with a starter template.

Why NativeScript?

NativeScript is an open source framework for building mobile apps which supports Vue.js, Angular, TypeScript and plain ol JavaScript. It prides itself on being fast and having "Native Performance", easy to extend, and learn. It is definitely worth mentioning that NativeScript is backed by Progress Software, the company which acquired Telerik and provides a host of powerful UI tools for developers. For Vue Js developer NativeScript provides us with a tool to build mobile apps that run like mobile apps and do not need to rely on a WebView all the time (hybrid apps). While there is Weex, NativeScript is much better supported & documented for the Western English speaking world.

The Prerequisites

As the official docs indicate, you will need to have a few things setup before you can get going with NativeScript:

  • Node.js (latest is best)
  • NativeScript CLI
  • OS Setup with NativeScript

This is actually the hardest part about this tutorial, as you will need to update most of your tools to the latest versions or you risk the high likelyhood of some build process failing. Once you do get past the setup phase though, development itself is similar to building any normal Vue.js app.

Updating Node.js

Update your version of Node.js to the latest. How you do this will highly depend on your OS and your preference for managing NPM and Node. David Walsh has this article on how to update here. Please note this is out dated and he has a note at the top recommending to use NVM instead.

NativeScript CLI

Next, you'll need to install the NativeScript CLI

 npm install -g nativescript

If all goes well you'll prompted about a few things to finish the setup.

OS with NativeScript

Probably the most time consuming task will be getting NativeScript itself setup on your specific OS. The NativeScript Vue docs have the specific links for your OS here.

For this tutorial we're going to assume we're on a Mac and are building an iOS app. So to continue we should make sure your computer has xCode all setup.

Getting Started

Okay, hopefully you've made it this far and have a proper enviroment setup.

For this tutorial, you have two options. You can try out the NativeScript template nativescript-vue/vue-cli-template which is available here. Which will run you through a setup

Or if you prefer, you can just clone the tutorial repo I created here.

git clone git@github.com:andreliem/vue-nativescript-getting-started.git

If you prefer starting from scratch with the NS template, run the following to setup your project:

vue init nativescript-vue/vue-cli-template vue-nativescript-getting-started

You'll be prompoted with a series of questions about your project. For this tutorial we picked Yes to install the vue-router and vuex. Also, we picked a Color scheme of light but feel free to use anything you like.

Once it's installed you'll have a directory structure like below:

.
├── LICENSE
├── README.md
├── launch.js
├── package.json
├── prepare.js
├── src
│   ├── assets
│   │   └── images
│   │       └── NativeScript-Vue.png
│   ├── components
│   │   ├── Counter.vue
│   │   ├── HelloWorld.vue
│   │   └── Home.vue
│   ├── main.js
│   ├── router
│   │   └── index.js
│   ├── store
│   │   ├── index.js
│   │   └── modules
│   │       └── counter.js
│   └── styles.scss
├── template
│   ├── app
│   │   ├── App_Resources
│   │   │   ├── Android
│   │   │   └── iOS
│   └── package.json
└── webpack.config.js

There's a lot of files going on here, for now don't worry we'll go over this in future tutorials.

Build It

Lets move on to building this app to see what happens.

First install the packages needed for this project.

npm install

Next, lets try running this locally with debugging on.

npm run watch:ios 

If your setup is anything like mine, you'll probably get some complaints like below because we never setup NativeScript completely.

Errors

If you didn't receive any errors you can skip these next 2 sections on getting setup with NativeScript!

Setup NativeScript

Because we have the NativeScript CLI installed, we can run the following:

tns setup

It will ask you to install xCode, HomeBrew, Google Chrome, Java SDK, Android SDK and more... if you are comfortable with installing everything then just accept All by entering A. This is by far the least fun part about getting going!

Installation can take a while so go grab a cup of your favourite beverage while you wait :).

Setup NativeScript Cloud

We'll follow the recommendations and install NativeScript cloud with the following command.

tns cloud setup

This should not take quite as long.

Now lets give the build step a try again:

npm run watch:ios 

If this works for you without any major errors, you should see xCode show an iPhone that eventually results in a screen like this:

Running

If you see this, congrats! You are now setup and ready to build a native app!

Testing this out

Lets start with something simple, in your project go to HelloWorld.vue and update some text in the template. Once you update it you'll see the app reload with the changes.

Extending the demo app

So now we have our app setup, lets look at how you would go about adding a new screen or section in the app.

Router

Open up src/router/index.js and add a new path like below

<script>
import Sample from '../components/Sample';

const router = new VueRouter({
...
    {
      path: '/sample',
      component: Sample,
      meta: {
        title: 'Sample',
      },
    },
...
});
</script>

Sample Component

Next, lets create the sample component src/components/Sample.vue with some very basic code.

<template>
  <Page class="page">
    <ActionBar class="action-bar" title="Sample Page">
      <NavigationButton text="Go Back" android.systemIcon="ic_menu_back" @tap="$router.push('/home')"/>
    </ActionBar>

    <StackLayout class="hello-world">
      <Label class="body" textWrap=true text="text"/>
    </StackLayout>
  </Page>
</template>
<script>
  export default {
    data () {
      return {
        text: "I am sample text"
      };
    },
  };
</script>

Add Section to Home Page

Lastly, lets add a link to this Sample page from the main home page as another button within the Stack Layout

<StackLayout>
  <Button class="btn btn-primary" @tap="$router.push('/counter')">Counter</Button>
  <Button class="btn btn-primary" @tap="$router.push('/hello')">Hello World</Button>
  <Button class="btn btn-primary" @tap="$router.push('/sample')">Sample</Button>
</StackLayout>

If all goes well, your app will look something like this:

Running
Running

Adding some elements

With NativeScript, it's really easy to add in some common form elements you would need in a typical application. Using the sample page we built, lets add a typical date picker and button. Here is what the main body of the page should look like now:

<StackLayout class="sample">
  <Label class="body" textWrap=true text="Date Pick"/>
  <DatePicker @loaded="onDatePickerLoaded" @dateChange="onDateChanged" />
  <Button text="Button" @tap="buttonTap" />
</StackLayout>

We have added the DatePicker and Button elment with appropriate methods to call based on specific actions.

When the date is changed, we will display a basic alert prompt window and log the call back to the console. As for the button, lets make it bring up the common action prompt which can be used for various hooks. In this scenario we will provide two options and handle the result via the call back.

<script>
methods: {
  onDateChanged () {
    alert({
      title: "Date Changed",
      message: "The date was changed",
      okButtonText: "OK"
    }).then(() => {
      console.log("closed it");
    });
  },
  buttonTap () {
    action("Take Action", "Cancel", ["Option1", "Option2"])
      .then(result => {
        console.log(result);
      });
  }
}
</script>

Here is what the Sample Page should look like now:

Running

Wrapping Up

Just like that we are already building a truly native app using Vue.js code! You might almost forget you're using NativeScript because everything is in the familiar Vue world. In future posts I will go into more detail about building a real world app, if you enjoyed this please share and don't forget to subscribe to the newsletter. Don't forget, you can get the source code for this tutorial on github here.