feat(module): add support for vue using unplugin (#2416)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

docs/content/1.getting-started/2.installation/1.nuxt.md

@@ -1,13 +1,22 @@
 ---
-title: Installation
-description: 'Learn how to install and configure Nuxt UI v3 in your application.'
+title: Install in a Nuxt app
+navigation.title: Nuxt
+description: 'Learn how to install and configure Nuxt UI in your Nuxt application.'
+select:
+  items:
+    - label: Nuxt
+      icon: i-logos-nuxt-icon
+      to: /getting-started/installation/nuxt
+    - label: Vue
+      icon: i-logos-vue
+      to: /getting-started/installation/vue
 ---
 
 ## Setup
 
 1. Install the Nuxt UI v3 alpha package:
 
-::code-group
+::code-group{sync="pm"}
 
 ```bash [pnpm]
 pnpm add @nuxt/ui@next
@@ -50,7 +59,7 @@ If you're using **pnpm**, ensure that you either set [`shamefully-hoist=true`](h
 
 ## Options
 
-You can customize Nuxt UI by providing options in your `nuxt.config.ts`:
+You can customize Nuxt UI by providing options in your `nuxt.config.ts`.
 
 ### `prefix`
 
@@ -145,7 +154,7 @@ Nuxt UI v3 uses [pkg.pr.new](https://github.com/stackblitz-labs/pkg.pr.new) for
 
 Preview releases are automatically generated for every commit to the `v3` branch and pull requests targeting the `v3` branch. To use it into your project, use the installation command below by replacing `5385f84` with any commit hash or pull request number.
 
-::code-group
+::code-group{sync="pm"}
 
 ```bash [pnpm]
 pnpm add https://pkg.pr.new/@nuxt/ui@5385f84

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

@@ -0,0 +1,252 @@
+---
+navigation.title: Vue
+title: Install in a Vue app
+description: 'Learn how to install and configure Nuxt UI in your Vue application.'
+select:
+  items:
+    - label: Nuxt
+      icon: i-logos-nuxt-icon
+      to: /getting-started/installation/nuxt
+    - label: Vue
+      icon: i-logos-vue
+      to: /getting-started/installation/vue
+---
+
+## Setup
+
+1. Install the Nuxt UI v3 alpha package:
+
+::code-group{sync="pm"}
+
+```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 ui from '@nuxt/ui/vite'
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    ui()
+  ],
+})
+```
+
+::tip
+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"]
+}
+```
+
+```bash [.gitignore]
+# Auto-generated type declarations
+auto-imports.d.ts
+components.d.ts
+```
+::
+
+3. 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:
+
+```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`.
+
+### `prefix`
+
+Use the `prefix` option to change the prefix of the components.
+
+- Default: `U`{lang="ts-type"}
+
+```ts [vite.config.ts]
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import ui from '@nuxt/ui/vite'
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    ui({
+      prefix: 'Nuxt'
+    })
+  ]
+})
+```
+
+### `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.
+::
+
+```ts [vite.config.ts]
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import ui from '@nuxt/ui/vite'
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    ui({
+      ui: {
+        colors: {
+          primary: 'green',
+          neutral: 'slate'
+        }
+      }
+    })
+  ]
+})
+```
+
+### `colorMode`
+
+Use the `colorMode` option to enable or disable the color mode integration from `@vueuse/core`.
+
+- Default: `true`{lang="ts-type"}
+
+```ts [vite.config.ts]
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import ui from '@nuxt/ui/vite'
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    ui({
+      colorMode: false
+    })
+  ]
+})
+```
+
+### `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 [vite.config.ts]
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import ui from '@nuxt/ui/vite'
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    ui({
+      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 [vite.config.ts]
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import ui from '@nuxt/ui/vite'
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    ui({
+      theme: {
+        transitions: false
+      }
+    })
+  ]
+})
+```
+
+::note
+This option adds the `transition-colors` class on components with hover or active states.
+::
+
+## Continuous Releases
+
+Nuxt UI v3 uses [pkg.pr.new](https://github.com/stackblitz-labs/pkg.pr.new) for continuous preview releases, providing developers with instant access to the latest features and bug fixes without waiting for official releases.
+
+Preview releases are automatically generated for every commit to the `v3` branch and pull requests targeting the `v3` branch. To use it into your project, use the installation command below by replacing `5385f84` with any commit hash or pull request number.
+
+::code-group{sync="pm"}
+
+```bash [pnpm]
+pnpm add https://pkg.pr.new/@nuxt/ui@5385f84
+```
+
+```bash [yarn]
+yarn add https://pkg.pr.new/@nuxt/ui@5385f84
+```
+
+```bash [npm]
+npm install https://pkg.pr.new/@nuxt/ui@5385f84
+```
+
+```bash [bun]
+bun add https://pkg.pr.new/@nuxt/ui@5385f84
+```
+
+::
+
+::note
+**pkg.pr.new** will automatically comment on PRs with the installation URL, making it easy to test changes.
+::

docs/content/1.getting-started/4.icons.md

@@ -51,7 +51,7 @@ slots:
 
 It's highly recommended to install the icon data locally with:
 
-::code-group
+::code-group{sync="pm"}
 
 ```bash [pnpm]
 pnpm i @iconify-json/{collection_name}