/native-script-vue-quick-start

Basic steps on how to quickly get started with NativeScript and Vue for local development setup, for both Android and IOS apps. The Hello World app

Primary LanguageJavaScript

NativeScript with Vue Quick Start (Hello World App)

Run Hello World app locally

  1. git clone https://github.com/AhmedAlatawi/NativeScript-Vue-Quick-Start.git
  2. cd NativeScript-Vue-Quick-Start
  3. npm i
  4. tns run

When starting with NativeScript and Vue from scratch, follow these steps for local development setup:

  1. Make sure that Node.JS is installed on your machine globally. Open your command prompt terminal, and run node -v to confirm.

  2. Execute npm install -g nativescript in your command prompt terminal. This will install NativeScript CLI on your machine globally. After installation is done, run tns to ensure NativeScript CLI was installed successfully.

  3. For Windows 7 or later, open your command prompt terminal as an administrator (right click --> Run as Administrator), and run the following script:

@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https://www.nativescript.org/setup/win'))"

For macOS, run the following script instead in your terminal:

ruby -e "$(curl -fsSL https://www.nativescript.org/setup/mac)"

  1. After the script is finished, run tns doctor command to ensure that the installation was successful (you should see “No issues were detected” message).

  2. Run npm install -g @vue/cli @vue/cli-init in your terminal. This will install the Vue CLI globally. (After it's done, you can run vue -V to confirm)

  3. Open your favorite IDE (e.g. VS code), and inside a terminal, run vue init nativescript-vue/vue-cli-template ns-vue-hello-world

Note: ns-vue-hello-world is the name of the project. Feel free to choose your own name.

Note: You will be asked a few questions regarding your project's configuration. Here is an example with answers:

Project name? ns-vue-hello-world
Project description? A native application built with NativeScript-Vue
Application name? NativeScript-Vue Application
Unique application identifier? org.nativescript.application
Project version? 1.0.0
Author? Ahmed Alatawi <aalat001@gmail.com>
License? MIT
Select the programming language? javascript
Select a preset (more coming soon)? TabView
Install vuex? (state management) No
Install vue-devtools? No
Color scheme? forest

  1. Run cd ns-vue-hello-world && npm i

  2. For Windows, go ahead and install Android Studio, open it, click on "AVD Manager" icon (on top right corner next to SDK manager icon), and create a new virtual device (emulator).

Note: make sure that the virtual device is turned on after it's created.

For macOS, install Xcode instead. Follow the steps here for more info on how to download and setup Xcode.

  1. Go back to your IDE, and within the same terminal you had open (in step #7), run ns run command.

  2. Finally, you should be able to see the project being prepared, packaged, and deployed to your virtual device. If you make any code changes, the changes should be reflected on the virtual device as well.

Reference 🎯

Author 📚

Ahmed Alatawi