Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Vue.js and NativeScript in One Minute

DZone's Guide to

Vue.js and NativeScript in One Minute

Using Vue with NativeScript is becoming more of a reality every day. Learn how to create a simple Vue app for iOS and Android in about a minute.

· Mobile Zone ·
Free Resource

One of the pillars of NativeScript is the extensibility of the framework itself. There isn't another native JavaScript framework out there that is flexible enough to provide support for an established framework like Angular, a community-driven Vue integration, a way-too-early look at Preact support, and an ongoing commitment to "vanilla" JavaScript (a.k.a. NativeScript Core).

Did you know in the early days we considered the name "Angular Native" for NativeScript? While we adore Angular, we didn't want to pigeonhole ourselves into one specific framework. This is why we are so excited about the growth in interest in merging Vue with NativeScript.

A few weeks back I put together a short (like one minute short) video on developing a NativeScript app with Vue. If you missed it then, here you go:


Want to try it for yourself? Here it is, from scratch, zero to native mobile app with Vue and NativeScript:

Using Vue with NativeScript

You haven't installed NativeScript yet? Wait, of course you have. But just in case:

$ npm install -g nativescript

Next, we need to create the NativeScript project:

$ tns create vue-test (or whatever you want to call your app)

Navigate to the newly created directory:

$ cd vue-test

Install the nativescript-vue plugin:

$ npm install --save nativescript-vue

Open the app.js file and replace the existing contents with this:

const Vue = require('nativescript-vue/dist/index');

new Vue({
  template: `
    <page>
      <stack-layout>
        <label text="Hello Vue!" style="background-color:#41b883;color:#ffffff;padding:10;text-align:center"></label>
      </stack-layout>
    </page>
  `,
}).$start();

Before we continue, we should take a quick look at what is happening in this code:

  • We are requiring the nativescript-vue module;
  • We are creating a new Vue template, which is just {N} layouts and UI components;
  • We are calling $start(), which calls the NativeScript application.start() method you may be more familiar with.

Finally, run the app on an iOS/Android connected device or simulator/emulator:

$ tns run ios | android

Success!

ios android nativescript vue

What's Next?

As we march towards a 1.0 release, we encourage you to play around with the nativescript-vue plugin. Try out all of the NativeScript layouts and UI components. In a giving mood? Check for open issues and squash some bugs with us!

Topics:
ios ,android ,nativescript ,vue.js ,mobile ,mobile app development ,vue

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}