NativeScript Vue: Getting Started in Visual Studio on Windows

While the official install documents for NativeScript Vue are really good and are getting improved on all the time I did find them a little confusing, particularly from a Visual Studio point of view.

Indeed this tutorial will lean heavily on those guides, expanding on that information where neccessary. Much of the information in the official guide is lacking in detail from a Visual Studio perspective. This is understandable as they are trying to cater to users on all platforms, Windows, Linux & Mac.

For example it doesn’t go into much detail on how to get the Visual Studio Android Emulator working which can be quite tricky. This tutorial will focus solely on getting up and running on Windows using the Visual Studio IDE.

Pre-Steps:

Follow the NativeScript Windows components setup you will need to create NativeScript Vue apps. When it comes to the step around downloading an Emulator it suggests several options, for this tutorial we went with the Android Emulator for Visual Studio.

At this point you should have the following installed:

• NodeJS
• NativeScript CLI
• Android SDK
• Android Device Emulator for Visual Studio

Getting your NativeScript Vue app running locally in the Emulator:

1. Create an app using NativeScript Vue CLI on the command line:
   • $ npm install -g @vue/cli @vue/cli-init
$ vue init nativescript-vue/vue-cli-template <project-name>
$ cd <project-name>
$ npm install
$ # or
$ yarn install
   • At this point you should have a basic NativeScript application sitting in a directory on your machine.
2. Run the ‘Android Emulator for VS’ and start up one of the newer builds. You should find the emulator in your start menu if it installed successfully.
3. Open up  your command prompt (cmd) as admin and type in the following:
   1. adb devices
   2. If no devices are listed you may be missing the neccessary registry entry to run your Android Emulator. You will need to add a new Key as shown in the image at the bottom of this page below, changing the path to match your Android SDK path. This is the path to the “android-sdk” folder, probably located in your C or D Drive.
   3. Close down your emulator and run
      1. adb kill-server
      2. adb start-server
   4. Restart Emulator. Once you have restarted your emulator run adb devices again – the device should now be listed.
4. Also check that the device is seen by NativeScript by running the command tns devices in your command window.
5. Finally using the IP listed under this device list run the following:
   1. tns run android --bundle
   2. or if that doesn’t work:
   3. tns run android --bundle --device <IP:Port>
      1. using IP listed under ‘adb devices’ command
   4. I found that this can take a really long time to run the first time, so be patient. Should be quicker after that.

Editing your NativeScript Vue App in Visual Studio:

Once these steps are complete the application should eventually open in your emulator. Keep the CLI running in your command prompt window.

To make changes to the application simply open up Visual Studio and go to file -> open-> folder and open up the root folder of your application.

To test it out open up the App.vue file and make changes to the ‘Hello World!’ message. Switch over to the emulator and after a few short seconds the application should relaunch in the emulator with your new text displayed.

You are now ready to create your first NativeScript Vue application in Visual Studio.

Coming Soon: A full ‘NativeScript Vue in Visual Studio’ Course. But for now check out some of our other posts on all things web development.