Develop Mobile Apps with NativeScript and VueJs

Background

Here at Littlelines, we like to use VueJs for a lot of our web app projects. It fits the needs of our clients and makes development simple and fun. But these days, client needs and technologies are evolving, as always. Many clients are looking to build mobile or tablet apps to fit their needs. When we are faced with these kinds of use cases, do we have to abandon our tried and tested tech stack and develop an app in a different framework? Or worse yet, develop two side-by-side apps to target both Android and iPhone ecosystems?

There may be a simpler way forward— one that lets us use the tools we know well, reuse existing code or share code throughout projects (either through APIs or NPM packages), and increase speed of development.

These days, it is becoming more and more common to use Javascript (and Vue) to build native mobile apps. There are a few options available to us to use Vue to build mobile apps. One option is a framework called Vue Native. This is a wrapper for the immensely popular framework React Native (it compiles down to React Native code). This is one popular option, but, for our needs, the best current solution is NativeScript.

In our opinion, the simplest and most straightforward option is NativeScript with Vue integration. This solution allows use to use all of the familiar tools we use when using Vue for the web — single file components, Vuex, plugins, and many more of the features we’ve come to enjoy in Vue — while staying close to the metal with native code, without having to rely on limitations and features of yet another framework.

Let’s set up a project and look at a few examples to see how well Vue and NativeScript work together. There are a couple prerequisites for necessary for starting development with NativeScript and Vue. Follow these steps to set up your local environment.

Set up NativeScript:

The documentation for NativeScript is robust, and has some pretty good tutorials for how to get started working. Following these instructions here we can install the NativeScript npm package and set up your local system for development (there are separate instructions for Mac, Windows, and Linux operating systems). Alternatively, if you want to skip all the local setup and start testing out NativeScript immediately in your browser, you can play with NativeScript and Vue in the sandbox provided by the creators of NativeScript here.

Get started creating an app:

After your system is configured, setting up a Vue app is as simple as running the command vue init nativescript-vue/vue-cli-template example_project. (Full instructions here. This command will present you with configuration options for your app (name, description, Vuex or devtools integration, etc) and build the structure for you app.

Previewing and testing the app:

Once you have the app set up, you will naturally want to view the UI and see what the app looks like. There are a few options for this. First, you could run the command ‘tns run’ and view the app on emulators on your machine or connected mobile devices. The second option is more exciting. You can use the NativeScript Playground and NativeScript Preview apps — available for Android and IOS— to preview your application on your smartphone. To use this method, you will run the command ‘tns preview’ and a QR code will appear in your terminal. Using the NativeScript Playground app, you scan this code, and you’ll see your app running on your phone!

Development:

And now we build our app. Building a NativeScript app with Vue is similar to building a web app, but there are some key differences. The biggest difference will be the markup for your UI. NativeScript does not use HTML for its markup. When building our app in NativeScript, we’ll have to get familiar with the the library of NativeScript elements called components. These are pre-built UI elements, much like HTML buttons, labels, inputs, etc, and we will use them like HTML elements to build out our UI. These elements also helpfully wrap native IOS and Android APIs, so it allows up to have an app that works in many different environments. So if we can’t use HTML, what does our markup look like in NativeScript? Here we have a very simple .vue single file component, using HTML and Javascript.

<template>
  <form class="row" >
    <h2>Answer a question:</h2>
    <input type="text" name="answer" v-model="answer" placeholder="Enter text..." />
    <button type="button" @click="answerQuestion()">Answer</button>
  </form>
</template>

<script>
  export default {
    name: 'form',
    data () {
      return {
        answer: ''
      }
    },
    methods: {
      answerQuestion () {
        console.log("Question answered!");
      }
    }
  }
}
</script>

So what will this look like with Vue and NativeScript? We can keep the same Javascript from above and simply swap out the HTML for NativeScript components.

<template>
  <Page>
    <StackLayout class="row">
      <TextField v-model="answer" hint="Enter text..." />
      <Button text="Button" @tap="answerQuestion" />
    </StackLayout>
  </Page>
</template>

How to pull data into your app:

What we’ve essentially created thus far is the front end portion of a single page app (SPA), in web terms. So when we need to pull in data from our server/ database, we can do it like we would a Vue single page app, through an API that we or someone else has created. Using the NativeScript HTTP module, we can create http requests back to our servers and pull the appropriate data into our app, just like we would in a web app. A simple get request might look like this:

import * as http from "http"

getList() {
  http.getJSON("https://{your api}.com/api/v2/endpoint").then(result => {
    this.list = result.results
  }, error => {
    console.log(error)
  })
}

You can see the rest of this api (to see examples of POST requests, image or file requests, etc) in the official NativeScript documentation. If you would prefer to use the http package you are already familiar with (axios, Vue Resource, etc.), those are available through NPM, as well. You can pull those in as you would in any other Vue app.

Conclusion:

From here, the sky’s the limit. You can endlessly combine these elements to create whatever kind of mobile app you or your clients would ever need. The NativeScript API also allows you to access specific features and/or APIs for either for IOS or Android platform so you can ensure app will work on any kind of device. There are even options to allow you to share code between your Vue web and mobile apps. We have only scratched the surface of the features available with NativeScript and Vue integration.

Additional Resources:

Code Sharing Dev Setup Publish Android Publish IOS HTTP Requests