Native Mobile Apps with Vue.js and NativeScript: Getting Started

Joshua Bemenderfer

NativeScript is a platform, similar to React Native, that allows native mobile apps to be written in JavaScript and rendered using native UI components. Originally, NativeScript was developed with Angular in mind, along with a native JavaScript API, but recently, members of the NativeScript and Vue communities have released version 1.0 ✨ of a plugin that allows you to use Vue.js instead.

Getting Set Up

Before you can use NativeScript to develop an app for iOS or Android, you first need the dependencies for, well, developing an iOS or Android app.

NativeScript conveniently gives you some one-line setup scripts you can run in a terminal on Windows or macOS to install and configure everything you’ll need. If you’d prefer to do things the hard way though, read on.

Android

  • Install Java JDK 8.
  • Install Android Studio or android-sdk and/or the command-line tools. Make sure to set JAVA_HOME and ANDROID_HOME! If you don’t have an Android device, you’ll also want an emulator.

iOS

Installing NativeScript

Next, install NativeScript using npm install -g nativescript. (Yeah, okay, the package name is rather obvious.)

To confirm that everything is set up properly, you can run tns doctor. (tns is the name of the NativeScript CLI, though you can use nativescript if you’d prefer.)

Creating an App

Now, of course, the next step is to create an app. Here’s where things get a bit hairy.

Most likely you’ll want vue template support for your apps, so you’ll need a module bundler, like webpack. Configuring webpack properly for NativeScript development can be tricky, so there’s a template available, made by Tiago Alves, that has a pre-configured nativescript-vue and webpack project. However, the template and NativeScript / nativescript-vue can get out of sync fairly easily, so there’s a good chance the template might break in the near future. You have been warned.

Anyway, create a project using tns create my-app-name --template https://github.com/tralves/nativescript-vue-webpack-template.

You’ll find your app’s source code in the app directory, and platform-specific data in the platforms directory. The tns directory contains your compiled app and a few other things. You’ll probably notice various compiled and copied versions of your app lying around the directory tree. Just remember that the only one that matters is in the root app directory.

You’ll probably want to change your app id, so edit nativescript.id in package.json to fit your app path / site in reverse URL format.

Developing

Android device / emulator

(If you don’t have an android device connected to your development machine via USB, go ahead and connect one or start an Android emulator now.)

Open two terminals, one in your project root directory, and one in project-root/tns.

In the first terminal, run npx webpack --watch --env.tns --env.android. This will start webpack with live-reload and configure it for an Android environment. In the second terminal, run tns debug android. This will build the actual app and upload it to your phone / emulator.

If all goes well, your built app should be installed on your phone, and you will be able to view it.

iOS simulator

These instructions only apply on macOS with XCode installed and configured.

Open two terminals, one in your project root directory, and one in project-root/tns.

In the first terminal, run npx webpack --watch --env.tns --env.ios. This will start webpack with live-reload and configure it for an ios environment. In the second terminal, run tns debug ios. This will build the actual app and upload it to your emulator.

If all goes well, your built app should be installed in your simulator.

If you have trouble, try resetting your simulator’s settings using iOS Simulator -> Hardware -> Erase All Content And Settings

Building / Deploying

This part can be a bit involved, take a look at the official guide for more details.

Android

A basic build can be created using tns build android --bundle. An APK will be created in platforms/android/app/build/outputs/apk. However, this will be an unsigned debug APK.

To build a full store-ready APK, follow the guide.

iOS

A basic build can be created using tns build ios --bundle, however the safest way is usually to load the Xcode project directly in Xcode and build from there like you would any other iOS app.

Using Vue

Oh, right, this was a guide about using Vue with NativeScript! Well, assuming you’ve completed the guide above and have an app running on a device or emulator, go ahead and clear out everything you don’t need in app/, such as JsComponent.js, app.css, app.scss and images/. You should now be able to write *.vue components like you always do.

Here are some quick nativescript-vue tips:

  • To use NativeScript plugins that add new elements, just use Vue.registerElement("element_name", require("some_plugin").ElementToRegister);. You should then be able to use it as normal.
  • vuex and vue-router should work out of the box, but most other Vue plugins won’t.
  • To use NativeScript UI Elements, add them to your templates as normal.
  • To change the title/action bar when you open the app, add <action-bar title="The Title You Want"></action-bar> to your root Vue template.
  • You can change the splash screen by editing the images in app/App_Resources/Android/drawable-*/logo.png and app/App_Resources/iOS/LaunchImage.launchimage/*.png.

For more information, consult nativescript-vue’s documentation. (And feel free to contribute! There’s still plenty documentation and examples that have yet to be fully written.)

  Tweet It

🕵 Search Results

🔎 Searching...