loading...
Front-End Foxes

A Sneak Peek of NativeScript-Vue 2.0!

jenlooper profile image Jen Looper Updated on ・4 min read

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.

1.0

Today, NativeScript-Vue is already being used in production apps, including the Catholic Answers App:

Catholic Answers

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:

Elocute

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:

Picme

Not impressed yet? How about my latest app, still a WIP, TarotMoji, where you can get Tarot card readings crammed with Emoji:

TarotMoji

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 /src folder, which contained /assets, /components, and other parts of the app such as the Vuex store.
  • The /template folder contained the /App_Resources folder 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 dist folder 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 npm commands, such as npm run watch:ios to enable LiveSync which watches for changes and refreshes the app in the simulator or on a device.

LiveSync

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:

new 2.0 via Vue-CLI

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:

2.0 Screenshot

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!

folder structure

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();
Enter fullscreen mode Exit fullscreen mode

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:

Sidekick

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

Discussion

pic
Editor guide
Collapse
georgehanson profile image
George Hanson

This looks really cool! I liked version 1, so it will be good to use the latest release :)

Collapse
monterail profile image
Monterail

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

Collapse
nagarjun profile image
Nagarjun Palavalli

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.

Collapse
jenlooper profile image
Jen Looper Author

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)

Collapse
shiv19 profile image
Shiva Prasad

Super excited for the release of {N} Vue 2.0! :D

Collapse
jackedwardlyons profile image
Jack Lyons

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!

Collapse
superdiana profile image
Super Diana

This is pure bliss!!

Collapse
gokatz profile image
Gokul Kathirvel

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?

Collapse
jenlooper profile image
Jen Looper Author

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.

Collapse
tunaxor profile image
Angel D. Munoz

Awesome! I used version 1 before, but had to leave it there, it seems I'll get to play with this again!

Collapse
stuta profile image
stuta

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)

Collapse
jenlooper profile image
Jen Looper Author

Try vue init nativescript-vue/vue-cli-template nativescript - Igor just moved the next branch to master! 🏆

Collapse
igor_randj profile image
Igor Randjelovic

Yes! Sorry about that, maybe I should keep the #next branch for a while until all resources are updated...

Thread Thread
jenlooper profile image
Jen Looper Author

I updated this article to reflect the changes, all good :)

Collapse
rafegoldberg profile image