Installation

We’re going to be using the NativeScript Playgrounds so you can get right to the point versus setting up a development environment. If you wish to set up a development environment, below are some instructions. Unfortunately, the Node.js live server that Vue.js developers have been accustom to, does not apply when developing native mobile applications. The reason is, you need SDK’s or Software Development Kits for each operating system; iOS and Android.

The installation is different for the two main desktop operating systems: macOS and Windows 10.

$ npm install -g nativescript

$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

$ brew update
$ brew install node@8

# Install XcodeProj
$ sudo gem install xcodeproj

# Install CocoaPods
$ sudo gem install cocoapods

$ brew tap caskroom/versions
$ brew cask install java8

$ export JAVA_HOME=$(/usr/libexec/java_home)

$ brew cask install android-sdk

$ export ANDROID_HOME=/usr/local/share/android-sdk

$ $ANDROID_HOME/tools/bin/sdkmanager "tools" "platform-tools" "platforms;android-25" "build-tools;27.0.3" "extras;android;m2repository" "extras;google;m2repository"

$ npm i -g nativescript
$ tns doctor

@powershell -NoProfile -ExecutionPolicy unrestricted -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%chocolateyin

choco install googlechrome -y

choco install nodejs-lts -y

choco install jdk8 -y

choco install android-sdk -y

"%ANDROID_HOME%	oolsinsdkmanager" "platform-tools" "platforms;android-25" "build-tools;27.0.3" "extras;android;m2repository" "extras;google;m2repository"

@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https://nativescript.org/setup/win-avd'))"

choco install androidstudio -y

$ npm i -g nativescript
$ tns doctor # test to see if installed properly

Getting Started with Playgrounds

Keep in mind, when developing a real production application, you will need to configure a development environment, which you can walk through with their official documentation.

1. Download the “NativeScript Playground” and “NativeScript Preview” apps for the App Store or Google Play Store.
2. Visit the NativeScript Playgrounds website.
3. Scan the QR code on your phone.
4. Follow along.

First of all, NativeScript Playgrounds are amazing. Just type your code in the web browser, click “Preview” and watch your phone update over the network. If you are all set, let’s explore NativeScript for Vue together.

Differences Between Vue.js and NativeScript

Before you get too far down into NativeScript, let’s point out a few differences between traditional Vue.js development and NativeScript development. For starters, you are not writing HTML. You are writing these HTML-like tags that are really components that convert into native components. For instance, if you want a <p>, in NativeScript you are actually going to write <Label /> instead. The reason being is that <p> does not convert well into the native UILabel and Label components for iOS and Android, respectively. Another caveat is instead of using v-on:click for click events, you are using the @tap="" event for tap events.

Lastly, all of the template markdown in a traditional Vue.js application is actually using string literals instead of the <template /> component in the single-file Vue component format. All of your methods and logic will live above the template still in the form of methods, computed, etc.

Playing With the Code

So, to begin. Open up the app.js file in Playgrounds and delete everything but the <ActionBar /> component. NativeScript needs a base “view” just like Vue.js needs a root element. We’re going to use the <StackLayout /> component, so when you keep adding components inside, they just stack on top of each other. Let’s add a few things before building an interface.

app.js

const Vue = require("nativescript-vue");

new Vue({

  template: `
    <Page class="page">
      <ActionBar title="Home" class="action-bar" />
      <StackLayout backgroundColor="#3c495e">

      </StackLayout>
    </Page>
  `,

}).$start();

First, let’s add a <WebView />. This WebView view is like an <iframe> in the front-end web developer world; it’s a window into a website.

<WebView height="1600px" src="http://bleedingedgepress.com/" />
`

app.js

const Vue = require("nativescript-vue");

new Vue({
  template: `
    <Page class="page">
      <ActionBar title="NativeScript Demo App" class="action-bar" />
      <StackLayout backgroundColor="#3c495e">
        <WebView height="1600px" src="http://bleedingedgepress.com/" />
      </StackLayout>
    </Page>
  `,
}).$start();

You should see the mobile version of the Bleeding Edge Press website on your phone...in a native app in Vue.js! Let’s add to this. Let’s add a heading and a button that performs an action. In app.js write a heading. Since we are not worried about web standards or SEO, we can get away with a few things. In the traditional sense, this would be a <h1> however, this is a <Label />. In the StackLayout add the following.

<Label text="Bleeding EdgePress" class="heading" />

You’ll notice that there is a class associated with this Label because you can use CSS in NativeScript! In the playground, all of the CSS for this app is in the app.css file. Open that up and add the following:

.heading {
  padding: 50px 30px;
  color: white;
  font-size: 25px;
}

Let’s move on and add a <Button /> next. Under the WebView, add the following:

<Button text="Follow Bleeding Edge Press" />

This is going to render a button on the screen. This button won’t do anything until you give it an action or a function to run when it’s pressed. This is going to be a follow button so you can visit Bleeding Edge Press on Twitter. For now, add the @tap event with a string value equal to onButtonTap.

<Button text="Follow Bleeding Edge Press" @tap="onButtonTap" />

Up in the Vue Instance, add a function in the methods property.

new Vue({
  methods: {
    onButtonTap() {
      alert('Follow @edgepress on Twitter!);
    },
  },
  template: `
    <Page>
      <ActionBar title="NativeScript Demo App" class="action-bar" />
      <StackLayout backgroundColor="#3c495e">
        <Label text="Bleeding EdgePress" class="heading" />
        <WebView height="1600px" src="https://bleedingedgepress.com/" />
        <Button text="Follow Bleeding Edge Press" @tap="onButtonTap" class="follow" />
      </StackLayout>
    </Page>
  `,
}).$start();

When tapped, a native alert will be trigger with the text, “Follow @edgepress on Twitter!” But we can make this a little more functional. We want to open up a URL when the user taps this button. To do that, you need to import a package called tns-core-modules/utils/utils. Above the Vue Instance, add const below the Vue library.

const utilsModule = require("tns-core-modules/utils/utils");

In the onButtonTap method, reference the imported library and pass in a URL for the button to open.

utilsModule.openUrl("https://twitter.com/edgepress")

Your app.js should look something like this:

const utilsModule = require("tns-core-modules/utils/utils");

new Vue({
  methods: {
    onButtonTap() {
      utilsModule.openUrl("https://twitter.com/edgepress")
    },
  },
  template: `
    <Page>
      <ActionBar title="NativeScript Demo App" class="action-bar" />
      <StackLayout backgroundColor="#3c495e">
        <Label text="Bleeding EdgePress" class="heading" />
        <WebView height="1600px" src="https://bleedingedgepress.com/" />
        <Button text="Follow Bleeding Edge Press" @tap="onButtonTap" />
      </StackLayout>
    </Page>
  `,
}).$start();

After the Playgrounds refreshes, tap on the button. If you have the Twitter app already installed on your phone, the @edgepress Twitter page will show up in the app. If not, the URL will open in your default browser. If you haven’t already noticed, you can drag elements from the bottom right into the editor to generate the coded needed for those elements. It’s very Xcode-esque.

Conclusion

This was a very quick look at NativeScript for Vue, but I hope you can see just how influential this can be to the Vue.js community. If you have had experience with native mobile app development before, some of these concepts may look familiar to you. These components can be Label and ScrollView, as they directly correspond to native components like UILabel, UIScrollView for iOS and Label and ScrollView for Android.

NativeScript is very different, yet very familiar at the same time. The benefit of NativeScript is that you can develop real native mobile applications with existing front-end technologies like Vue.js or Angular. To deploy these applications, you will need to build them with their respective IDE’s and submit them to their respective App Stores. Native mobile development is an exciting and rewarding experience that has just made its way to Vue.