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. The great news is that it is possible to build a native app with NativeScript and Vue.js. Two technologies emerged, NativeScript and Vue.js, create a perfect solution for building native mobile applications without any burden. However, that’s not the only option for 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?
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 the integration of Angular and Vue.js, however, there are different solutions that help using NativeScript with React or other frameworks.
Why is the framework a good choice for Vue.js? As it was already mentioned, NativeScript has a Vue.js integration guide. So the Vue framework is officially 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 truly native mobile app.
And why is the Vue.js good for 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 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 does not have a DOM. So, instead using an element that is in the HTML body, you don’t need to use it and the rendering of your app looks different. If you are developing an app for the web, the 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 a few different perspectives on how you can develop with NativeScript and Vue. NativeScript provides a very handy sandbox that is called a 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 an app, which is to do everything on your own device. In this case, what you need to do is use an additional npm plugin that allows you to use 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 a 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 an AVD – Android virtual devices manager in order to test the app that you have made. In the 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.
And here is to the App Store version of NativeScript Playground.
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 on your phone, you will run the app on your device.
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 the local development environment.
Despite the fact that NativeScript has some kind of guide that shows 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
The 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 to install vue-devtools, you won’t be able to use tns preview command, the one that lets you preview your application on mobile.
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.
What happened there is that the code of the 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 process 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:
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:
- The time picker that is set to the current time by default
- The 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.