NativeScript Vue js tutorial

NativeScript Vue.js tutorial. Make a native Vue.js app

If you had ever wanted to develop a mobile application with Vue.js but didn’t knew if that’s even possible, you came to the right place. Great news is that it is possible to build a native app with NativeScript and Vue.js. Two technologies emerged, NativeScript and Vue.js, creates a perfect solution for building native mobile applications without any burden. However, that’s not the only option how you can use Vue.js for mobile development, here are some great alternatives. Anyway, get ready to get hands on with this NativeScript Vue tutorial.

What is the NativeScript?

NativeScript for Vue.js

I am sure you know what the Vue.js is (in case you don’t, check out this article), but had you heard about the NativeScript?

NativeScript is a framework that lets you building native apps for Android and iOS platforms with JavaScript. Currently, NativeScript has official guides for integration of Angular and Vue.js, however there are different solutions that helps using NativeScript with React or other frameworks.

Why is the framework good choice for Vue.js? As it was already mentioned, NativeScript has Vue.js integration guide. So the Vue framework aisofficialy supported. And of course, NativeScript is a mature framework that has a lot of attention and love from the community. It is trusted by many developers, so using NativeScript with Vue is a reliable way of developing your next trully native mobile app.

And why is the Vue.js good for a mobile development? It’s a lightweight and progressive frameworks, and as the lightness for the mobile applications is very important, it makes Vue a natural fit. And of course, if you had used Vue for web development, most of your knowledge could be reused for mobile development.

What are the differences when developing a Vue and and a Vue NativeScript application?

One of the biggest differences between a web app built with Vue, and a native app that uses Vue and NativeScript, is that the native app do not have a DOM. So, instead using an element that is in the HTML body, you don’t need to use it and you the rendering of your app looks different. If you are developing an app for web, creation of a Vue instance probably looks like this:

new Vue({
	el: '#app',
	render: h => h(App),
});

And when developing with NativeScript, you can spin up the Vue instance like this:

new Vue({
	render: h => h('frame', [h(App)])
}).start()

Another difference is that instead of the Vue library, you should import installed nativescript-vue plugin:

import Vue from 'nativescript-vue'

Getting started with Vue.js and NativeScript

There are few different perspectives how you can develop with NativeScript and Vue. NativeScript provides a very handy sandbox that is called playground. That’s basically an environment in the cloud where you can write your Vue.js code and later one, test it with your own mobile device.

Another approach is probably preferred if you are serious about building app, is to do everything on your own device. In this case, what you need to do is use additional npm plugin that allows you using NativeScript with Vue. Anyway, let’s get started with the cloud solution first.

Installing NativeScript Playground app

As I already mentioned, there is a cloud sandbox where you can test the waters of NativeScript. You can access it here.

This playground is for … playing. Playing with NativeScript! Make sure you choose a NativeScript + Vue.js (it’s an option when starting a new project). So what’s good about this “playground”? You can use drag and drop function to using any components, such as buttons, labels, sliders, or any other component that is used for mobile application. And what’s more awesome, is that it uses Vue, so the code, that was generated when dragging the components, can be copied into your own app that you are building on local machine.

One of the prerequisites before starting to develop a Vue app with NativeScript, is that we should get our testing environment ready. And in this case, part of our testing environment is a NativeScript Playground app.

If you are familiar with the development of Android applications, you know that you need a AVD – Android virtual devices manager in order to test the app that you have made. In case of NativeScript Vue, you don’t need a resource heavy virtual device running, all you need is a physical smartphone that has a specific app downloaded.

So, all you need to do is either search in the App Store or in the Google Play Store for the NativeScript Playground application.

Here is a link to the application in the Google Play Store.

NativeScript for Vue in Google Play Store

And here is to the App Store version of NativeScript Playground.

NativeScript for Vue in App Store

So now if you have installed this app, you will be asked for another one, the preview app. After installing it, you will be ready to go. Back to the playground, by clicking Preview you will get a QR code. By scanning it with an app that you had installed to your phone, you will run the app on your device.

How to use NativeScript playground

As you might see, the playground is very handy not only when spinning your first NativeScript and Vue native app, but during the further development. However, that’s not a full cloud based IDE for sure. It lacks debugging features and you can’t install any plugins. so it’s not the best fit if you are developing a serious app.

Configuring NativeScript and Vue.js to work locally

Having a playground is great, however the solution might not fit you if you are building a serious app. Let’s see how we can use local development environment.

Despite the fact that NativeScript has some kind of guide that show how NativeScript could be integrated with Vue, we can use a more convenient method. There is a plugin called NativeScript-Vue.

In order to install the needed plugin, we must have vue-cli add on init installed. This can be done like this:

npm install -g @vue/cli @vue/cli-init

As we will use tns – a NativeScript command-line interface, we will have to have TypeScript installed globally. So here is you can install the NativeScript globally:

npm install -g nativescript

Installation will take a while, but if it was successful, we could choose the template of NativeScript and start a project with it:

vue init nativescript-vue/vue-cli-template vue-mobile-project

During the creation process, you will be asked a series of questions. Doesn’t matter what you will choose this time, as we are just testing the waters out, let’s just leave everything default, except, set the “Install vue-devtools” value to No. But in case you need vue-devtools or vuex, you can choose to install it. An important note: if you will choose installing vue-devtools, you won’t be able to use tns preview command, the one that let’s you preview your application on mobile.

Successful project creation with TypeScript-Vue plugin.

After this, navigate to the project directory and execute another important step – run npm install command to install the needed packages. Make sure the installation finished successfully, after this, execute the tns preview command. If the tns is installed, after a while you will get a weird view of a QR code in the terminal.

NativeScript application QR code

What happened there is that the code of newly generated project was compiled and the application can be launched with a help of the Playground app. Follow along the previously written instructions to get the application from mobile application stores. When you had scanned the QR code, a proccess of copying template files should start. You will see a message indicating this in the terminal. After the processes will finish successfully, you should see an app running in your device. For now, it just says “Hellow World!”. But let’s see how we can add something more.

Let’s add something to our app

Without the “Hello world” message there is not much in our app. Let’s edit the Vue.app file. Overwrite the existing code and add this (we will get into details what’s there later):

<template>
    <Page>
        <ActionBar title="Home" />
        <ScrollView>
            <StackLayout>
                <Tabs height="1000px">
                    <TabStrip>
                        <TabStripItem>
                            <Label text="Time picker"></Label>
                        </TabStripItem>
                        <TabStripItem>
                            <Label text="Calendar"></Label>
                        </TabStripItem>
                        <TabStripItem>
                            <Label text="Accelerometer"></Label>
                        </TabStripItem>
                    </TabStrip>
                    <TabContentItem>
                        <GridLayout>
                            <TimePicker :hour="currentHour"
                                :minute="currentMinute" />
                        </GridLayout>
                    </TabContentItem>
                    <TabContentItem>
                        <GridLayout>
                            <RadCalendar height="1000px" />
                        </GridLayout>
                    </TabContentItem>
                    <TabContentItem>
                        <GridLayout>
                            <StackLayout>
                                <Button text="Start Accelerometer"
                                    @tap="startAccelerometer"
                                    :visibility="accelerometerValues.x ? 'collapsed' : 'visible'" />
                                <StackLayout
                                    :visibility="accelerometerValues.x ? 'visible' : 'collapsed'">
                                    <Label
                                        :text="'X: ' + accelerometerValues.x" />
                                    <Label
                                        :text="'Y: ' + accelerometerValues.y" />
                                    <Label
                                        :text="'Z: ' + accelerometerValues.z" />
                                </StackLayout>
                            </StackLayout>
                        </GridLayout>
                    </TabContentItem>
                </Tabs>
            </StackLayout>

        </ScrollView>
    </Page>
</template>

<script>
    const accelerometer = require("nativescript-accelerometer");
    let accelerometerListening = false;

    import Vue from "nativescript-vue";
    import CalendarView from "nativescript-ui-calendar/vue";
    Vue.use(CalendarView);

    export default {
        methods: {
            startAccelerometer: function() {
                if (accelerometerListening) {
                    accelerometer.stopAccelerometerUpdates();
                }
                accelerometer.startAccelerometerUpdates(
                    data => {
                        accelerometerListening = true;
                        this.accelerometerValues = data;
                    }, {
                        sensorDelay: "ui"
                    }
                );
            }
        },

        data() {
            return {
                currentHour: new Date().getHours(),
                currentMinute: new Date().getMinutes(),

                accelerometerValues: {
                    x: null,
                    y: null,
                    z: null
                }
            };
        }
    };
</script>

<style scoped>
    .home-panel {
        vertical-align: center;
        font-size: 20;
        margin: 15;
    }

    .description-label {
        margin-bottom: 15;
    }
</style>

Now let’s run the code with the tns preview command, scan QR with your smartphone and see if that works. If everything went good, you should get an app with three different tabs as a result:

Three tabs in the native Vue.js application with NativeScript

In this example we have a few features on our app. In order to show you the possibilities, a layout with three tabs were used. It has different components:

  • Time picker that is set to the current time by default
  • Calendar tab has a calendar added. You can see how easy it is to get it working as everything you need to do is just add import the nativescript-ui-calendar package and use a RadCalendar component.
  • Accelerometer – this is to show how easily can native mobile features such as accelerometer, GPS or any other, could be used

Feel free to run this code on your machine.

Final words

NativeScript with Vue is a great solution for building cross platform applications. However, there are other options. Make sure you have tried different ones to find the one that fits your needs.

Leave a Comment

Your email address will not be published. Required fields are marked *