NativeScript and Vue.js

Vue.js is a lightweight framework for building engaging user interfaces. NativeScript powers cross-platform (truly native) mobile apps, using the web skills you already know. Combined they are a fantastic pair for developing immersive mobile experiences.

NativeScript and Vue.js

__NS_And_Vue
The lightweight nature of Vue.js makes it perfect for mobile development. In addition, if you are already a Vue developer, much of the Vue syntax and app architecture will seem very familiar. All you need to do in a NativeScript-Vue app is switch the plugin you include at the start, change your app instantiation parameters, and write your front-end templates to use NativeScript modules, rather than web markup.
Here are the three main differences between Vue.js for the web, and NativeScript-Vue:

1. For your mobile app, use the NativeScript-Vue npm package instead of the standard Vue.js library:

NS-Vue-differences1-min

2. Create your Vue instance without attaching it to a <div> - since NativeScript does not rely on DOM manipulation, you can start up your app without using the extra el parameter:

NS-Vue-differences2-min

3. Write your templates according to your platform’s standards. On the web, you’d use semantic html, whereas for your mobile app, you would use NativeScript modules with XML:

NS-Vue-differences3A-min
NS-Vue-differences3B-min

Getting Started

There are a couple of ways to start using NativeScript-Vue:

  1. When you get to the point where you are ready to put your app out there, you need to jump on the more advanced wagon and install NativeScript tools locally and then pick a template to start with.
  2. The NativeScript Playground is a place in the cloud where you can play around with NativeScript and Vue.js in your browser until you figure out the basics. Use the Playground and start dragging and dropping component code to build your app and preview it on a physical device.

Use these resources to continue your journey:

__Documentation

Documentation

The documentation will help you learn the ins and outs of making truly native mobile applications with Vue.js and NativeScript.

View the Docs

Why use Vue.js with NativeScript?

__App_Structure

Application Structure and Plumbing

Vue.js provides all of the plumbing necessary to create high quality, highly maintainable apps, and you can reuse a considerable amount of your existing Vue.js knowledge and even web-based code to build your NativeScript-Vue app.

__Native_Performance

Native Mobile Performance

With NativeScript, you can create zero compromise mobile apps with Vue.js that feature truly native UI and performance. Enjoy glorious 60fps without being a CSS or JavaScript wizard, even on Android. Say goodbye to mobile jank.

__Vue_Community

Vue and NativeScript-Vue Community

Tap into the expanding Vue.js developer community to get extra help, training, and reusable code that can be directly applied to NativeScript-Vue mobile projects. Join the community on Slack to help this Open Source, community-built project grow and mature.


Sponsored by progress-logo-min
NativeScript is licensed under the Apache 2.0 license
© 2018 Progress Software Corporation. All Rights Reserved. Privacy Center