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:

1. 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.
   
2. 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.
3. 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:

• Setting Up a Robust NativeScript-Vue Development Environment
• Using Plugins in a NativeScript-Vue App
• Full Documentation on NativeScript-Vue.org
• NativeScript-Vue Courses on NativeScripting.com

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?

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 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 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 in the #vue channel to learn more.