Vue / Vite
在纯 Vue + Vite 项目中使用 Movk 的独立组件、主题与 Composables，无需 Nuxt。
@movk/nuxt 不仅是 Nuxt 模块，还提供 Vite 插件（@movk/nuxt/vite）与 Vue 插件（@movk/nuxt/vue-plugin），让独立 UI 组件、AutoForm / DataTable、主题与非服务端 Composables 在纯 Vue + Vite 项目中直接可用。
Vue / Vite 模式不包含 API 集成域（
useApiFetch / useLazyApiFetch / useClientApiFetch、上传下载、$api 插件、鉴权与错误 toast 等），它们依赖 Nuxt 服务端运行时，仅在 Nuxt 模式下可用。安装
安装依赖
pnpm add @movk/nuxt @nuxt/ui zod tailwindcss
npm install @movk/nuxt @nuxt/ui zod tailwindcss
yarn add @movk/nuxt @nuxt/ui zod tailwindcss
vue-router 默认启用（ui.router 选项控制）。若使用默认值，请同时安装 vue-router：
pnpm add vue-router
npm install vue-router
添加 Vite 插件
在 vite.config.ts 注册 movk() 插件：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import movk from '@movk/nuxt/vite'
export default defineConfig({
plugins: [
vue(),
movk()
]
})
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'
}
})
]
})
movk() 内部注册了 unplugin-auto-import 与 unplugin-vue-components，会生成 auto-imports.d.ts 与 components.d.ts。建议将它们加入 .gitignore 并在 tsconfig 中 include。tsconfig.app.json
{
"include": ["src/**/*.ts", "src/**/*.vue", "auto-imports.d.ts", "components.d.ts"]
}
.gitignore
auto-imports.d.ts
components.d.ts
若使用 TypeScript，可在
tsconfig 中为主题虚拟模块添加别名，以在 vite.config.ts 获得补全：tsconfig.node.json
{
"compilerOptions": {
"paths": {
"#build/movk-ui": ["./node_modules/.movk-ui/movk-ui"],
"#build/ui": ["./node_modules/.nuxt-ui/ui"]
}
}
}
注册 Vue 插件
在入口注册 @movk/nuxt/vue-plugin（内部已链入 @nuxt/ui/vue-plugin）：
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')
引入样式
src/assets/css/main.css
@import "tailwindcss";
@import "@movk/nuxt";
用 <UApp> 包裹根组件
<UApp> 提供 Toast、Tooltip 与命令式 overlay 的全局上下文，useMessageBox 依赖它：
src/App.vue
<template>
<UApp>
<RouterView />
</UApp>
</template>
根容器建议加
class="isolate"（index.html 的 #app），确保样式作用域与 overlay 层叠正确。选项
在 vite.config.ts 的 movk() 中传入选项进行配置。
prefix 组件前缀
组件名前缀。
- 默认：
M
vite.config.ts
movk({
prefix: 'M'
})
site 站点信息
站点名称，影响主题持久化的 localStorage key 前缀（<name>-ui-*）。
vite.config.ts
movk({
site: { name: 'my-app' }
})
theme 主题
theme.colors（颜色别名）、theme.defaultVariants（默认变体）、theme.prefix（与 Tailwind 前缀一致）等，对齐 Nuxt 模式 movk.theme。
vite.config.ts
movk({
theme: {
defaultVariants: {
color: 'neutral',
size: 'sm'
}
}
})
ui
ui 是 @nuxt/ui unplugin 配置（Partial<NuxtUIOptions>）的透传口，承载 router、colorMode、autoImport、components、dts、icon、ui 主题等。movk 会把自身 composables 与组件解析自动注入 ui.autoImport / ui.components，无需手动配置即可使用。