In February, I was busting my buttons with pride, announcing the launch of NativeScript-Vue 1.0 on the big stage in Amsterdam at Vue.Amsterdam Conference. Together with its creator, community guru and Vue-Master Igor Randjelovic, we unleashed onto the world a beautiful new way of building downloadable mobile apps for iOS and Android using a single codebase, pairing the power of NativeScript with the pleasure of development with Vue.js.
Today, NativeScript-Vue is already being used in production apps, including the Catholic Answers App:
I have several demos of my own as well, showing how to style your apps to create a nice interface. Elocute, for example, is a web and mobile app suite for language teachers and their students:
Teachers enter texts on the web (http://elocute.me) to be spoken by students in their classrooms to test their pronunciation. Students pick up assignments on the mobile app (shown above) and speak the text into the device, where it is transcribed by a speech-to-text plugin. An algorithm then works behind the scenes to score the similarity of the teacher's text to the student's transcription. The pain of language labs are now solved!
Or how about Picme, an app I created to demo the speed of ML Kit on device, testing a human's ability to identify tricky pictures vs. using an image-labelling AI:
Not impressed yet? How about my latest app, still a WIP, TarotMoji, where you can get Tarot card readings crammed with Emoji:
With all the possibilities we now have to create stylish, performant native apps with NativeScript-Vue, what could be improved? In other words, what's next for this cool integration? Read on!
Change #1 - the Folder Structure
When we first launched the standard system of creating a NativeScript-Vue app via the Vue CLI, the mobile app's folder structure somewhat resembled that of a web app scaffolded via the Vue CLI.
- The developer coded the app's screens and logic in the
/srcfolder, which contained/assets,/components, and other parts of the app such as the Vuex store. - The
/templatefolder contained the/App_Resourcesfolder which is where a mobile app stores its icons and splash screens. This folder was necessary for the build process. - Finally, the built versions of the mobile app were stored in the
distfolder which contains all the assets that will eventually be uploaded to the App Stores when the app is ready to be released. - The app was run using
npmcommands, such asnpm run watch:iosto enable LiveSync which watches for changes and refreshes the app in the simulator or on a device.
In NativeScript-Vue's 2.0 version of the Vue-CLI template, the folder structure is dramatically simplified, aligning it with the folder structure of a standard NativeScript mobile app. Now, when you want to use this template, navigate to the folder where you want your app to live, and use: vue init nativescript-vue/vue-cli-template myapp in your terminal. npm install the app's dependencies, and you're off to the races:
Install the dependencies of this app, and you're presented with a basic app that contains the elements you requested in the preinstall script. Then, you run the app using standard NativeScript commands tns run ios / android --bundle to get webpack working and to kick off LiveSync:
The new folder structure is way simpler. All the files you need to worry about are in the /app folder, where you will spend most of your time as the app developer. Build files are contained in the /platforms folder in the app root. It's very fast, clean, and tidy!
Change #2 - the Frame element
NativeScript 4.0 introduced a new Frame element, allowing the developer to change the root element of an application, thus facilitating sharing common elements across app pages. In earlier iterations of the framework, this Frame element was created automatically, but this is no longer the case. Now we need to explicitly add a Frame to our template. No big deal! The Vue-CLI template has you covered:
new Vue({
render: h => h('frame', [h(HelloWorld)]),
}).$start();
It's a small change that is pretty easily handled by using these standardized templates.
Change #3 - Not Really a Change, an Enhancement: Use Sidekick
Because of the prior version's folder structure, it wasn't possible to manage the app using the Sidekick tool, a nice abstraction of the CLI that keeps your mobile app projects well organized. Guess what? Since the new template offers a more vanilla NativeScript-like folder structure, you can use it with Sidekick! Download Sidekick here.
You can open a project in Sidekick once it has scaffolded via the Vue-CLI, and then manage your builds. Just make sure to click the 'webpack' switch, to ensure that webpack is leveraged, and take advantage of the local and cloud simulators it offers:
NativeScript-Vue 2.0 is right around the corner! In the meantime, you can create an app TODAY using our vue-cli template. Watch the NativeScript blog for a write-up on how to upgrade your app, if you have already been working in this space. If not, now's the time to jump in! Create your next blockbuster mobile app with NativeScript-Vue 2.0!
Need help? Connect with us on Slack in the #vue channel and read through the docs at NativeScript-Vue.org. Experiment with NativeScript with no commitment using the Playground.
Also! We are hosting a webinar on NativeScript 2.0 on October 4th. Come join us! Register here
Top comments (15)
This looks really cool! I liked version 1, so it will be good to use the latest release :)
Hi Jen,
I’d like to let you know that you were mentioned in the list of top 20 most popular articles on Vue.js in 2018—bit.ly/2QvqiNA. The rank is based on the number of clicks in all issues of the Vue.js newsletter. Congrats!
Thank you for your sharing knowledge and supporting Vue.js community :)
Just wanted to give you a sign. If you find this piece of content useful, please share it with your network.
Either way, keep up the awesome work!
Cheers,
Joanna
This is great! How is support for the Vue Router coming along? When I last tried building something with NativeScript-Vue 1, I ran into a bunch of issues and the community told me that Vue Router support was still in beta.
hi, sorry for the delay. I think that pure Vue Router support isn't going to come any time soon, as changes we proposed to the core team aren't coming right away. In the meantime, manual routing works well; I use it in Elocute (github.com/jlooper/elocute/mobie-v2)
Super excited for the release of {N} Vue 2.0! :D
I love your posts on NativeScript, they're really well written! At my company we are considering an app and I'd love to use NS with Vue, I just have heard mixed opinions as to whether this is a good choice for an enterprise level application. Based on what you know, what are some of the major drawbacks / cons to using NS-Vue & NS in general? Should I even be worried about whether NS is good/bad for an enterprise app at all? Thanks!
This is pure bliss!!
Thanks for this article @jen. When I scaffold a project using Vue CLI 3.0 and tried to load it into sidekick, sidekick throws error saying
Cannot find a valid app. Anything I'm missing?hi Gokul, thanks for your note. Did you scaffold the new app using the new template? Make sure to add #next at the end of the template name, as the folder structure is totally different.
Awesome! I used version 1 before, but had to leave it there, it seems I'll get to play with this again!
vue init nativescript-vue/vue-cli-template#next nativescript
vue-cli · Failed to download repo nativescript-vue/vue-cli-template#next: Response code 404 (Not Found)
Try vue init nativescript-vue/vue-cli-template nativescript - Igor just moved the next branch to master! 🏆
Yes! Sorry about that, maybe I should keep the #next branch for a while until all resources are updated...
I updated this article to reflect the changes, all good :)
sweet