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 /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.

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