A Sneak Peek of NativeScript-Vue 2.0!
Tags: mobile, apps, nativescript, vue
Published: 2018-09-09 01:42:31

---
title: A Sneak Peek of NativeScript-Vue 2.0!
published: true
description: Learn more about how to build mobile apps with NativeScript-Vue, which is reaching 2.0 very soon. 
tags: mobile,apps,nativescript,vue
---

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](https://thepracticaldev.s3.amazonaws.com/i/qpnp3e0evhb5rl3mclvx.png)

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

![Catholic Answers](https://thepracticaldev.s3.amazonaws.com/i/is9nzjrv1j7lvgfzfncz.png)

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](https://thepracticaldev.s3.amazonaws.com/i/iokkby9pa566ma2knunt.gif)

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](https://thepracticaldev.s3.amazonaws.com/i/xggwiw3zru4dbj9hgowm.gif)

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

![TarotMoji](https://thepracticaldev.s3.amazonaws.com/i/o2bl7j9j6m2ssnq9omtc.png)

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](https://thepracticaldev.s3.amazonaws.com/i/duchm1j3f7m2tqsk7b01.gif)

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](https://thepracticaldev.s3.amazonaws.com/i/3kfu3qsb0sr73s8hwtcp.gif)

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](https://thepracticaldev.s3.amazonaws.com/i/d6zoxu7vl56zmyzm5uss.png)

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](https://thepracticaldev.s3.amazonaws.com/i/7uid9369otfmfskofrrc.png)

## 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](https://www.nativescript.org/nativescript-sidekick). 

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](https://thepracticaldev.s3.amazonaws.com/i/iyedtsm9iew0jb1xre15.png)

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](https://www.nativescript.org/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](https://developer.telerik.com/wp-login.php?action=slack-invitation) in the #vue channel and read through the docs at [NativeScript-Vue.org](http://www.nativescript-vue.org). Experiment with NativeScript with no commitment using the [Playground](http://play.nativescript.org).

>Also! We are hosting a webinar on NativeScript 2.0 on October 4th. Come join us! Register [here](https://attendee.gotowebinar.com/register/1758384468554226433?source=jen-preview-blog)