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

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

docs/app/app.vue

@@ -76,7 +76,16 @@ useServerSeoMeta({
   twitterCard: 'summary_large_image'
 })
 
-provide('navigation', navigation)
+const updatedNavigation = computed(() => navigation.value.map(item => ({
+  ...item,
+  children: item.children?.map(child => ({
+    ...child,
+    active: child.title === 'Installation' ? route.path.startsWith('/getting-started/installation') : undefined,
+    children: child.title === 'Installation' ? [] : child.children
+  })) || []
+})))
+
+provide('navigation', updatedNavigation)
 </script>
 
 <template>

docs/app/components/Header.vue

@@ -55,7 +55,7 @@ defineShortcuts({
 
       <USeparator type="dashed" class="my-4" /> -->
 
-      <UContentNavigation :navigation="navigation" />
+      <UContentNavigation :navigation="navigation" highlight />
     </template>
   </UHeader>
 </template>

docs/app/pages/[...slug].vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { withoutTrailingSlash } from 'ufo'
-import { findPageHeadline } from '#ui-pro/utils/content'
+import type { NavItem } from '@nuxt/content'
+import { findPageBreadcrumb, mapContentNavigation } from '#ui-pro/utils/content'
 
 const route = useRoute()
 
@@ -25,7 +26,9 @@ const { data: surround } = await useAsyncData(`${route.path}-surround`, () => {
     .findSurround(withoutTrailingSlash(route.path))
 }, { default: () => [] })
 
-const headline = computed(() => findPageHeadline(page.value))
+const navigation = inject<Ref<NavItem[]>>('navigation')
+
+const breadcrumb = computed(() => mapContentNavigation(findPageBreadcrumb(navigation?.value, page.value)))
 
 useSeoMeta({
   titleTemplate: '%s - Nuxt UI v3',
@@ -36,7 +39,7 @@ useSeoMeta({
 })
 
 defineOgImageComponent('Docs', {
-  headline: headline.value
+  headline: breadcrumb.value.map(item => item.label).join(' > ')
 })
 
 const communityLinks = computed(() => [{
@@ -75,12 +78,31 @@ const communityLinks = computed(() => [{
 
 <template>
   <UPage v-if="page">
-    <UPageHeader :title="page.title" :headline="headline">
+    <UPageHeader :title="page.title">
+      <template #headline>
+        <UBreadcrumb :items="breadcrumb" />
+      </template>
+
       <template #description>
         <MDC v-if="page.description" :value="page.description" unwrap="p" />
       </template>
 
       <template #links>
+        <UDropdownMenu v-if="page.select" v-slot="{ open }" :items="page.select.items" :content="{ align: 'end' }">
+          <UButton
+            color="neutral"
+            variant="subtle"
+            v-bind="page.select.items.find((item: any) => item.to === route.path)"
+            block
+            trailing-icon="i-heroicons-chevron-down-20-solid"
+            :class="[open && 'bg-[var(--ui-bg-accented)]/75']"
+            :ui="{
+              trailingIcon: ['transition-transform duration-200', open ? 'rotate-180' : '']
+            }"
+            class="w-[128px]"
+          />
+        </UDropdownMenu>
+
         <UButton
           v-for="link in page.links"
           :key="link.label"

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}

docs/nuxt.config.ts

@@ -71,6 +71,7 @@ export default defineNuxtConfig({
 
   routeRules: {
     '/': { redirect: '/getting-started', prerender: false },
+    '/getting-started/installation': { redirect: '/getting-started/installation/nuxt', prerender: false },
     '/composables': { redirect: '/composables/define-shortcuts', prerender: false },
     '/components': { redirect: '/components/app', prerender: false }
   },

docs/package.json

@@ -9,7 +9,7 @@
     "@nuxt/content": "^2.13.4",
     "@nuxt/image": "^1.8.1",
     "@nuxt/ui": "latest",
-    "@nuxt/ui-pro": "https://pkg.pr.new/@nuxt/ui-pro@5c9e5b4",
+    "@nuxt/ui-pro": "https://pkg.pr.new/@nuxt/ui-pro@e8d49db",
     "@nuxthub/core": "^0.7.37",
     "@nuxtjs/plausible": "^1.0.3",
     "@octokit/rest": "^21.0.2",