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
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:
There are a couple of ways to start using NativeScript-Vue today, assuming your computer is set up for NativeScript development. One is by creating a new app using a template:
$ tns create my-app --template nativescript-vue-template
This will create a new NativeScript project with several options included so that you can try different layouts. Notice the various files app-with-.js files in the
/app folder; switch the module named in the
app/package.json file to experiment with various ways of creating NativeScript-Vue apps:
If you need a more full-featured template, try the Webpack integration, which includes support for SFCs (.vue Single File Components), livereload as the project is built by Webpack; SASS imports and scss inside <style> tags in .vue files; root imports (imports starting with /refer to the root of the app folder); and Babel with es2015 and stage-2 presets.
Get started with this template here:
$ tns create sample-app --template https://github.com/tralves/nativescript-vue-webpack-template
Then, follow this link to learn how to start up your app development process.
Once you’ve got your project scaffolded, it’s time to build your native mobile app! Use these resources to get started quickly:
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?
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
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.