---
title: "Vue / Vite"
description: "Use Movk standalone components, theming and composables in a plain Vue + Vite project without Nuxt."
canonical_url: "https://nuxt.mhaibaraai.cn/en/docs/getting-started/vue"
---
# Vue / Vite

> Use Movk standalone components, theming and composables in a plain Vue + Vite project without Nuxt.

> [!NOTE]
> See: /docs/getting-started/installation
> 
> Using 
> 
> Nuxt
> 
> ? See the Nuxt mode installation instructions.

`@movk/nuxt` is not just a Nuxt module — it also provides a Vite plugin (`@movk/nuxt/vite`) and a Vue plugin (`@movk/nuxt/vue-plugin`), making standalone UI components, AutoForm / DataTable, theming and non-server-side composables available directly in plain Vue + Vite projects.

> [!WARNING]
> 
> Vue / Vite mode 
> 
> does not include the API integration domain
> 
>  (
> 
> useApiFetch
> 
>  / 
> 
> useLazyApiFetch
> 
>  / 
> 
> useClientApiFetch
> 
> , upload/download, 
> 
> $api
> 
>  plugin, auth and error toasts, etc.) — these depend on the Nuxt server runtime and are only available in Nuxt mode.

## Installation

### Install Dependencies

```bash [pnpm]
pnpm add @movk/nuxt @nuxt/ui zod tailwindcss
```

```bash [npm]
npm install @movk/nuxt @nuxt/ui zod tailwindcss
```

```bash [yarn]
yarn add @movk/nuxt @nuxt/ui zod tailwindcss
```

vue-router is enabled by default (controlled via the `ui.router` option). If using the default, also install `vue-router`:

```bash [pnpm]
pnpm add vue-router
```

```bash [npm]
npm install vue-router
```

### Add the Vite Plugin

Register the `movk()` plugin in `vite.config.ts`:

```ts [vite.config.ts (Vite)]
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import movk from '@movk/nuxt/vite'

export default defineConfig({
  plugins: [
    vue(),
    movk()
  ]
})
```

```ts [vite.config.ts (Inertia)]
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import movk from '@movk/nuxt/vite'

export default defineConfig({
  plugins: [
    vue(),
    movk({
      ui: {
        router: 'inertia'
      }
    })
  ]
})
```

> [!TIP]
> 
> `movk()` internally registers `unplugin-auto-import` and `unplugin-vue-components`, which generate `auto-imports.d.ts` and `components.d.ts`. It is recommended to add them to `.gitignore` and include them in `tsconfig`.
> 
> ```json [tsconfig.app.json]
> {
>   "include": ["src/**/*.ts", "src/**/*.vue", "auto-imports.d.ts", "components.d.ts"]
> }
> ```
> 
> ```bash [.gitignore]
> auto-imports.d.ts
> components.d.ts
> ```

> [!TIP]
> 
> If using TypeScript, you can add aliases for theme virtual modules in `tsconfig` for completions in `vite.config.ts`:
> 
> ```json [tsconfig.node.json]
> {
>   "compilerOptions": {
>     "paths": {
>       "#build/movk-ui": ["./node_modules/.movk-ui/movk-ui"],
>       "#build/ui": ["./node_modules/.nuxt-ui/ui"]
>     }
>   }
> }
> ```

### Register the Vue Plugin

Register `@movk/nuxt/vue-plugin` in your entry file (it already links in `@nuxt/ui/vue-plugin` internally):

```ts [src/main.ts]
import './assets/css/main.css'
import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import movk from '@movk/nuxt/vue-plugin'
import App from './App.vue'

const router = createRouter({
  routes: [],
  history: createWebHistory()
})

createApp(App)
  .use(router)
  .use(movk)
  .mount('#app')
```

### Import Styles

```css [src/assets/css/main.css]
@import "tailwindcss";
@import "@movk/nuxt";
```

### Wrap the Root Component with `<UApp>`

`<UApp>` provides the global context for Toast, Tooltip and imperative overlays; `useMessageBox` depends on it:

```vue [src/App.vue]
<template>
  <UApp>
    <RouterView />
  </UApp>
</template>
```

> [!NOTE]
> 
> It is recommended to add 
> 
> class="isolate"
> 
>  to the root container (
> 
> #app
> 
>  in 
> 
> index.html
> 
> ) to ensure proper style scoping and overlay stacking.

## Options

Pass options into `movk()` in `vite.config.ts` for configuration.

### `prefix` Component Prefix

Component name prefix.

- Default: `M`

```ts [vite.config.ts]
movk({
  prefix: 'M'
})
```

### `site` Site Information

Site name, affects the localStorage key prefix for theme persistence (`<name>-ui-*`).

```ts [vite.config.ts]
movk({
  site: { name: 'my-app' }
})
```

### `theme` Theme

`theme.colors` (color aliases), `theme.defaultVariants` (default variants), `theme.prefix` (aligned with the Tailwind prefix), etc. — mirrors the Nuxt mode `movk.theme`.

```ts [vite.config.ts]
movk({
  theme: {
    defaultVariants: {
      color: 'neutral',
      size: 'sm'
    }
  }
})
```

### `icon` Icons

`icon.clientBundle` controls whether the icons used by movk components and the built-in icon sets enter the build-time icon bundle, mirroring the Nuxt mode `movk.icon`. The icon data requires the matching `@iconify-json/*` packages in your project; collections that are not installed are skipped automatically (never a build failure). See [Theme · Icon Sets](https://nuxt.mhaibaraai.cn/docs/getting-started/theme#icon-sets).

```ts [vite.config.ts]
movk({
  icon: { clientBundle: false }
})
```

### `ui`

`ui` is a passthrough for `@nuxt/ui` unplugin configuration (`Partial<NuxtUIOptions>`), hosting `router`, `colorMode`, `autoImport`, `components`, `dts`, `icon`, `ui` theme, etc. Movk automatically injects its own composables, component resolution and icons into `ui.autoImport` / `ui.components` / `ui.icon.clientBundle.icons`, so no manual configuration is needed.

> [!NOTE]
> See: https://ui.nuxt.com/docs/getting-started/installation/vue#options
> 
> See the Nuxt UI module docs for the full configuration and features of the 
> 
> ui
> 
>  option.


## Sitemap

See the full [sitemap](https://nuxt.mhaibaraai.cn/sitemap.md) for all pages.