feat: add support for using nuxt/ui in pure vue using unplugin

.gitignore

@@ -22,3 +22,6 @@ logs
 .env
 .env.*
 !.env.example
+
+playground-vue/auto-imports.d.ts
+playground-vue/components.d.ts

build.config.ts

@@ -1,6 +1,12 @@
 import { defineBuildConfig } from 'unbuild'
 
 export default defineBuildConfig({
+  entries: [
+    './src/unplugin'
+  ],
+  rollup: {
+    emitCJS: true
+  },
   replace: {
     'process.env.DEV': 'false'
   },

docs/content/1.getting-started/2.vue.md

@@ -0,0 +1,228 @@
+---
+title: Installation (Vue)
+description: 'Learn how to install and configure Nuxt UI v3 with pure Vue.'
+---
+
+## Setup
+
+1. Install the Nuxt UI v3 alpha package:
+
+::code-group
+
+```bash [pnpm]
+pnpm add @nuxt/ui@next
+```
+
+```bash [yarn]
+yarn add @nuxt/ui@next
+```
+
+```bash [npm]
+npm install @nuxt/ui@next
+```
+
+```bash [bun]
+bun add @nuxt/ui@next
+```
+
+::
+
+2. Add the Nuxt UI Vite plugin in your `vite.config.ts`{lang="ts-type"}:
+
+```ts [vite.config.ts]
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { NuxtUIPlugin } from '@nuxt/ui/unplugin'
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    NuxtUIPlugin.vite()
+  ],
+})
+```
+
+3. Nuxt UI registers `unplugin-auto-import` and `unplugin-vue-components`, which will generate `auto-imports.d.ts` and `components.d.ts` type declaration files. You will likely want to gitignore these, and add them to your `tsconfig`.
+
+```json [tsconfig.app.json]
+{
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "auto-imports.d.ts", "components.d.ts"]
+}
+```
+
+```conf [.gitignore]
+# Auto-generated type declarations
+auto-imports.d.ts
+components.d.ts
+```
+
+4. Register the Nuxt UI Vue plugin in your app:
+
+```ts [main.ts]
+import { createApp } from 'vue'
+import nuxtUI from '@nuxt/ui/vue-plugin'
+import App from './App.vue'
+
+const app = createApp(App)
+// ...
+app.use(nuxtUI)
+app.mount('#app')
+```
+
+4. Import Tailwind CSS and Nuxt UI in your `App.vue`{lang="ts-type"} or [CSS](https://nuxt.com/docs/getting-started/styling#the-css-property):
+
+```vue [App.vue]
+<style>
+@import "tailwindcss";
+@import "@nuxt/ui";
+</style>
+```
+
+::warning
+If you're using **pnpm**, ensure that you either set [`shamefully-hoist=true`](https://pnpm.io/npmrc#shamefully-hoist) in your `.npmrc` file or install `tailwindcss@next`, `vue-router` and `@unhead/vue` directly in your project's root directory.
+::
+
+## Options
+
+You can customize Nuxt UI by providing options in your `vite.config.ts`:
+
+```ts [vite.config.ts]
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { NuxtUIPlugin } from '@nuxt/ui/unplugin'
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    NuxtUIPlugin.vite({
+      // options go here
+    })
+  ],
+})
+```
+
+### `prefix`
+
+Use the `prefix` option to change the prefix of the components.
+
+- Default: `U`{lang="ts-type"}
+
+```ts [nuxt.config.ts]
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { NuxtUIPlugin } from '@nuxt/ui/unplugin'
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    NuxtUIPlugin.vite({
+      prefix: 'Nuxt'
+    })
+  ]
+})
+```
+
+### `colorMode`
+
+Use the `colorMode` option to enable or disable the color mode integration from `@vueuse/core`.
+
+- Default: `true`{lang="ts-type"}
+
+```ts [nuxt.config.ts]
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { NuxtUIPlugin } from '@nuxt/ui/unplugin'
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    NuxtUIPlugin.vite({
+      colorMode: false
+    })
+  ]
+})
+```
+
+### `ui`
+
+Use the `ui` option to provide configuration for Nuxt UI.
+
+::warning
+In the rest of the docs, there are references to the `app.config.ts` file (which is a Nuxt feature). When using Nuxt UI in a project without Nuxt, this configuration is passed in this `ui` option instead.
+::
+
+- Default: `true`{lang="ts-type"}
+
+```ts [nuxt.config.ts]
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { NuxtUIPlugin } from '@nuxt/ui/unplugin'
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    NuxtUIPlugin.vite({
+      ui: {
+        colors: {
+          primary: 'green',
+          neutral: 'slate'
+        }
+      }
+    })
+  ]
+})
+```
+
+### `theme.colors`
+
+Use the `theme.colors` option to define the dynamic color aliases used to generate components theme.
+
+- Default: `['primary', 'secondary', 'success', 'info', 'warning', 'error']`{lang="ts-type" class="inline"}
+
+```ts [nuxt.config.ts]
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { NuxtUIPlugin } from '@nuxt/ui/unplugin'
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    NuxtUIPlugin.vite({
+      theme: {
+        colors: ['primary', 'error']
+      }
+    })
+  ]
+})
+```
+
+::tip{to="/getting-started/theme#colors"}
+Learn more about color customization and theming in the Theme section.
+::
+
+### `theme.transitions`
+
+Use the `theme.transitions` option to enable or disable transitions on components.
+
+- Default: `true`{lang="ts-type"}
+
+```ts [nuxt.config.ts]
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { NuxtUIPlugin } from '@nuxt/ui/unplugin'
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    NuxtUIPlugin.vite({
+      theme: {
+        transitions: false
+      }
+    })
+  ]
+})
+```
+
+::note
+This option adds the `transition-colors` class on components with hover or active states.
+::

package.json

@@ -17,6 +17,15 @@
       "require": "./dist/module.cjs",
       "style": "./dist/runtime/index.css"
     },
+    "./unplugin": {
+      "types": "./dist/unplugin.d.ts",
+      "import": "./dist/unplugin.mjs",
+      "require": "./dist/unplugin.cjs",
+      "style": "./dist/runtime/index.css"
+    },
+    "./vue-plugin": {
+      "types": "./vue-plugin.d.ts"
+    },
     "./runtime/*": "./dist/runtime/*"
   },
   "bin": {
@@ -27,34 +36,38 @@
   "types": "./dist/types.d.ts",
   "files": [
     "dist",
-    "cli"
+    "cli",
+    "vue-plugin.d.ts"
   ],
   "scripts": {
     "build": "nuxt-module-build build",
     "prepack": "pnpm build",
     "dev": "DEV=true nuxi dev playground",
     "dev:build": "nuxi build playground",
-    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground && nuxi prepare docs",
+    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground && nuxi prepare docs && vite build playground-vue",
     "docs": "DEV=true nuxi dev docs",
     "docs:build": "nuxi build docs",
     "docs:prepare": "nuxt-component-meta docs",
     "docs:typecheck": "nuxi typecheck docs",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
-    "typecheck": "vue-tsc --noEmit && nuxi typecheck playground",
+    "typecheck": "vue-tsc --noEmit && nuxi typecheck playground && cd playground-vue && vue-tsc --noEmit",
     "test": "vitest",
     "release": "release-it --preRelease=alpha --npm.tag=next"
   },
   "dependencies": {
+    "@iconify/vue": "^4.1.2",
     "@nuxt/fonts": "^0.10.0",
     "@nuxt/icon": "^1.5.6",
     "@nuxt/kit": "^3.13.2",
     "@nuxt/schema": "^3.13.2",
     "@nuxtjs/color-mode": "^3.5.1",
     "@tailwindcss/postcss": "4.0.0-alpha.28",
     "@tailwindcss/vite": "4.0.0-alpha.28",
+    "@unhead/vue": "^1.11.10",
     "@vueuse/core": "^11.1.0",
     "@vueuse/integrations": "^11.1.0",
+    "consola": "^3.2.3",
     "defu": "^6.1.4",
     "embla-carousel-auto-height": "^8.3.0",
     "embla-carousel-auto-scroll": "^8.3.0",
@@ -63,12 +76,21 @@
     "embla-carousel-fade": "^8.3.0",
     "embla-carousel-vue": "^8.3.0",
     "embla-carousel-wheel-gestures": "^8.0.1",
+    "fast-deep-equal": "^3.1.3",
     "fuse.js": "^7.0.0",
+    "knitwork": "^1.1.0",
+    "magic-string": "^0.30.12",
+    "mlly": "^1.7.2",
     "ohash": "^1.1.4",
+    "pathe": "^1.1.2",
     "radix-vue": "^1.9.7",
     "scule": "^1.3.0",
     "tailwind-variants": "^0.2.1",
     "tailwindcss": "4.0.0-alpha.28",
+    "tinyglobby": "^0.2.9",
+    "unplugin": "^1.14.1",
+    "unplugin-auto-import": "^0.18.3",
+    "unplugin-vue-components": "^0.27.4",
     "vaul-vue": "^0.2.0"
   },
   "devDependencies": {

playground-vue/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Nuxt UI ❤️ Vue</title>
+  </head>
+  <body>
+    <div id="app" class="isolate"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

playground-vue/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "playground-vue",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@nuxt/ui": "latest",
+    "vue": "^3.5.10",
+    "vue-router": "^4.4.5"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.1.4",
+    "typescript": "^5.5.3",
+    "unplugin-auto-import": "^0.18.3",
+    "unplugin-vue-components": "^0.27.4",
+    "vite": "^5.4.8",
+    "vue-tsc": "^2.1.6"
+  }
+}