NativeScript and Vue.js

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:

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:

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:

Getting Started

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

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 to start dragging and dropping component code to build your app and preview it on a physical device.

Extend your knowledge of NativeScript-Vue with this comprehensive workshop that dives deep into Vue.js concepts and helps you to build a complete app from beginning to end. When you get to the point where you are ready to start seriously developing your app, you need to install NativeScript tools locally and then pick a template to start with.

Use these resources to continue your journey:

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

Web/Mobile Code Sharing

Creating a native cross-platform mobile app with Vue.js is only the start of your journey! Did you know that NativeScript-Vue also supports sharing your Vue.js code between web and mobile?



The Vue CLI now has support for the NativeScript-Vue Plugin called vue-cli-plugin-nativescript-vue . You can use this plugin and read all about code sharing with NativeScript-Vue.











Why use Vue.js with NativeScript?