# Vite

Nx plugin integration with Vite (opens new window).

# you can also skip vite installation, which will also be installed when executing generator:app
yarn add nx-plugin-vite vite -D
# some required peer deps you may need in nx workspace project
yarn add @nrwl/devkit @nrwl/node @nrwl/workspace @nrwl/tao -D

For Nx workspace V14, please use version ^2.2.1 version of vite plugin:

yarn add nx-plugin-vite@latest vite -D

The 1.x version will no longer receive updates.

# Note

# Project structure

Application generated by this plugin completely retains the directory structure of the original vite project, only adding the configuration needed for nx such as project.json, and the internal implementation is completely consistent with the way vite core works, so you can completely treat it as a normal vite project.

apps/your-vite-app
├── index.html
├── package.json
├── project.json
├── src
│   ├── App.css
│   ├── App.tsx
│   ├── favicon.svg
│   ├── index.css
│   ├── logo.svg
│   ├── main.tsx
│   └── vite-env.d.ts
├── tsconfig.json
└── vite.config.ts

# Ts config paths

As this plugin doesnot handle things more than start vite server, you will need to use Vite plugins for some common cases, for example using compilerOptions.paths:

import React, { useState } from 'react';
// some-lib is located in libs/some-lib
import * as someLib from 'some-lib';

console.log(someLib);

function App() {}

export default App;

Nx defines package alias in tsconig.base.json:

{
  "compileOnSave": false,
  "compilerOptions": {
    "paths": {
      "some-lib": ["libs/some-lib/src/index.ts"]
    }
  }
}

To use this feature in Vite app, you will need vite-tsconfig-paths (opens new window) to make compilerOptions.paths avaliable in Vite app:

import { defineConfig } from 'vite';
import reactRefresh from '@vitejs/plugin-react-refresh';
import tsconfigPaths from 'vite-tsconfig-paths';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [tsconfigPaths(), reactRefresh()],
});

# Breaking Changes

Since 1.2.0, executor serve / preview can only be configured with Vite config file.

# Generators

# app

nx g nx-plugin-vite:app your-vite-app --framework=react

Create a official Vite template and add plugin related workspace targets in workspace.json.

Supported framework: React(default), Vue, Svelte,Lit.

# setup

nx g nx-plugin-vite:setup exist-app

Add plugin related workspace targets to exist application.

# Executors

NOTE: In Nx-Vite project, it's recommended to configurate your vite project by PROJECT/vite.config.ts(which also has a higher priority) instead of schema options. When a option is defined in both ways, its resolve priority depends on Vite itself.

# serve

nx serve vite-app

Run vite command for project.

Only few options are supported from schema:

root: specify project root, if not configurated, will use workspace.project.root instead.
configFile(required): specify vite config path, relative to project root(or options.root if it's specified).

Find more supported schema options in Vite.Executor.Serve.

# build

nx build vite-app

Run vite build command for project.

Only few options are supported from schema:

root: specify project root, if not configurated, will use workspace.project.root instead.
configFile(required): specify vite config path, relative to project root(or options.root if it's specified).
outDir
watch
write
manifest
emitAtRootLevel(default: false): specify should emit built dist file in workspace root level, and --outDir will still be used for path calculation. For example:
```
{
  "outDir": "dist",
  "emitAtRootLevel": true
}
```
Configurations above will use WORKSPACE_ROOT/dist as dist directory, instead it will be WORKSPACE_ROOT/APPS_DIR/vite-app/dist if you set emitAtRootLevel to be false.

Find more supported schema options in Vite.Executor.Build.

# preview

nx preview vite-app

Run vite preview command for project.

root: specify project root, if not configurated, will use workspace.project.root instead.
configFile(required): specify vite config path, relative to project root(or options.root if it's specified).

Find more supported schema options in Vite.Executor.Preview.

← ESBuild Snowpack →