Home

Awesome

Deprecated :warning:

This template has been deprecated in favor of using the ns create command:

ns create myAwesomeApp --vue # add --ts if you'd like to scaffold a project with TypeScript
cd myAwesomeApp
ns run ios|android

Note: This is a new version of the template for NativeScript 7, if you are looking for the old template, it is available on the ns6 branch.

vue-cli-template

NativeScript-Vue application template for quick prototyping with vue-cli (2.x).

Usage

This is a project template for vue-cli.

# Scaffold project
npm install -g @vue/cli @vue/cli-init
vue init nativescript-vue/vue-cli-template <project-name>
cd <project-name>

# Install dependencies
npm install

# Build
ns build <platform>

# Preview the application on a device
ns preview

# Build, watch for changes and run the application
ns run

# Clean the NativeScript application instance
ns platform remove <platform>

# Hot Module Replacement (HMR) disabled Debugging session 
ns debug <platform> --no-hmr
<details><summary>Yarn usage</summary> <p>
# Scaffold project
yarn global add @vue/cli @vue/cli-init
vue init nativescript-vue/vue-cli-template <project-name>
cd <project-name>

# Install dependencies
yarn

</p> </details>

Debugging vs Production

During usual run, project runs with following settings -

  1. Code is not minified
  2. Vue.config.silent is false, so every component creation is logged
# Build, watch for changes and debug the application
ns debug <platform>

To minify code, and prevent Vue logs -

# Build for production
ns build <platform> --env.production

# Run as production
ns run <platform> --env.production

Using NativeScript plugins

Installing plugins is the same as official NativeScript documentation.

Use ns plugin add from the root of the project directory.

ns plugin add <plugin-name>