@nativescript/vite

@nativescript/vite

Vite integration for NativeScript apps.

Documentation · Environment Setup · Contribute · Community

Prerequisites

• NativeScript 9 or higher

Install

npm i @nativescript/vite -D

Quick start (init)

To bootstrap an existing NativeScript app for Vite, run from your app root:

npx nativescript-vite init

This will:

• Generate a vite.config.ts using the detected project flavor (Angular, Vue, React, Solid, TypeScript, or JavaScript) and the corresponding helper subpath from @nativescript/vite.
• Add (or update) the following npm scripts in your app package.json:
  • dev:ios
  • dev:android
  • dev:server:ios
  • dev:server:android
  • ios
  • android
• Add the devDependencies concurrently and wait-on.
• Add the dependency @valor/nativescript-websockets.
• Append .ns-vite-build to .gitignore if it is not already present.

After running init, you now have two ways to work with Vite:

• HMR workflow

npm run dev:ios

• Standard dev workflow (non-HMR)

ns debug ios --no-hmr
ns debug android --no-hmr

Usage

• Create vite.config.ts:

import { defineConfig, mergeConfig, UserConfig } from 'vite';
import { typescriptConfig } from '@nativescript/vite/typescript';

export default defineConfig(({ mode }): UserConfig => {
	return mergeConfig(typescriptConfig({ mode }), {});
});

Framework-specific configs should be imported from their matching subpaths to avoid loading unrelated framework tooling:

import { angularConfig } from '@nativescript/vite/angular';
import { reactConfig } from '@nativescript/vite/react';
import { solidConfig } from '@nativescript/vite/solid';
import { vueConfig } from '@nativescript/vite/vue';

• Update nativescript.config.ts:

import { NativeScriptConfig } from '@nativescript/core';

export default {
	// add these:
	bundler: 'vite',
	bundlerConfigPath: 'vite.config.ts',
} as NativeScriptConfig;

• Enjoy Vite.

Explore More

Check out the NativeScript Vite documentation for more configuration options and features.