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.
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:
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.
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:
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
Sample Component
Next, lets create the sample component src/components/Sample.vue
with some very basic code.
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
If all goes well, your app will look something like this:
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:
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.
Here is what the Sample Page should look like now:
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.
Originally published at www.vuejsradar.com.