NativeScript-Vue3

NativeScript-Vue now supports Vue 3 and is generally available! This version brings improved reactivity, a modern plugin system, and better TypeScript support.

Quick Start

To get started, you can use the StackBlitz Template.

Or, set up locally:

ns create myAwesomeApp --template @nativescript-vue/template-blank@latest

cd myAwesomeApp
ns run ios|android

Upgrading to v3

Please refer to our Upgrade Guide.

Using Vue Devtools

Install the standalone devtools in your app (it is not pulled in by nativescript-vue because it depends on Electron):

npm i -D @vue/devtools@^8

Then run with the vueDevtools flag. The devtools window opens on the host machine and the app connects to it:

ns run ios|android --env.vueDevtools

A free port from 8098 up is picked automatically; pass --env.vueDevtoolsPort=9000 to pin one, or --env.vueDevtoolsHost=http://192.168.1.10 to reach the devtools from a physical device. --env.vueDevtoolsSpawn=false skips launching the devtools app, for when one is already running, and --env.vueDevtoolsDebug logs the socket traffic between app and devtools.

🛠️ Android Users: To allow Vue Devtools to connect, enable cleartext HTTP traffic in your AndroidManifest.xml:

<application ...
+  android:usesCleartextTraffic="true"
.../>

TypeScript

Types for every core element, $navigateTo, $showModal and friends ship with the package. Third-party libraries such as Pinia or vue-i18n augment the vue module, and code often imports from vue. The templates map vue to nativescript-vue in tsconfig.json so both resolve; add this to existing projects:

{
  "compilerOptions": {
    "paths": {
      "vue": ["./node_modules/nativescript-vue"]
    }
  },
  "vueCompilerOptions": {
    "lib": "nativescript-vue"
  }
}

Issues

If you encounter any issues, please open a new issue with as much detail as possible.

• Join Discord

Looking for V2?

The V2 version has been moved to the v2 branch