Wednesday, 7 February, 2018 UTC
Summary
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 created a plugin that allows you to use Vue.js instead. NativeScript’s underlying tech is more mature than Weex’s, however the Vue integration isn’t very stable yet.
Now, the plugin is still in fairly early stages and has some rough edges, but it's mostly usable. The main issue at the moment is that the documentation is all over the place. Try and stick with only what is noted to work for your specific setup. (In this case, NativeScript + nativescript-vue + webpack template.)
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_HOMEandANDROID_HOME! If you don’t have an Android device, you’ll also want an emulator.
iOS
- You can only develop for iOS from a Mac.
- Install Xcode
- Install the Command Line Tools for Xcode
- Install xcodeproj
- Install CocoaPods
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
Creating an App tns doctor. (tns is the name of the NativeScript CLI, though you can use nativescript if you’d prefer.)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
Developing nativescript.id in package.json to fit your app path / site in reverse URL format.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
Building / Deploying iOS Simulator -> Hardware -> Erase All Content And SettingsThis 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
Using Vue 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.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. vuexandvue-routershould work out of the box, but most other Vue plugins won’t.- To use NativeScript UI Elements, add them to your templates as normal, but convert PascalCase to kebab-case. (For example,
<ActionBar>becomes<action-bar>and<Page>becomes<page>.) - 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.pngandapp/App_Resources/iOS/LaunchImage.launchimage/*.png.
Now to be honest, nativescript-vue is nowhere near production-ready yet. You will probably want to hold off from making anything other than demos, but by all means, please contribute wherever possible, so it can be production-ready soon!