Vue / Vite

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

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.

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

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 is enabled by default (controlled via the ui.router option). If using the default, also install vue-router:

pnpm add vue-router

npm install vue-router

Add the Vite Plugin

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() 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.

tsconfig.app.json

{
  "include": ["src/**/*.ts", "src/**/*.vue", "auto-imports.d.ts", "components.d.ts"]
}

.gitignore

auto-imports.d.ts
components.d.ts

If using TypeScript, you can add aliases for theme virtual modules in tsconfig for completions in vite.config.ts:

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

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

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:

src/App.vue

<template>
  <UApp>
    <RouterView />
  </UApp>
</template>

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

vite.config.ts

movk({
  prefix: 'M'
})

`site` Site Information

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

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.

vite.config.ts

movk({
  theme: {
    defaultVariants: {
      color: 'neutral',
      size: 'sm'
    }
  }
})

`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 and component resolution into ui.autoImport / ui.components, so no manual configuration is needed.

See the Nuxt UI module docs for the full configuration and features of the ui option.

Module Configuration

Configure component prefix, theme colors, fonts, API endpoints, auth strategy, response parsing rules and Toast notification behavior.

Theme System

Manage colors, radius, fonts, icon sets and dark mode through module defaults, the ThemePicker component and the useTheme composable.