feat(module): add support for vue using unplugin

.github/workflows/ci-v3.yml

@@ -56,6 +56,9 @@ jobs:
       - name: Test
         run: pnpm run test
 
+      - name: Test (vue)
+        run: pnpm run test:vue
+
       - name: Build
         run: pnpm run build
 

.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,12 +1,20 @@
 import { defineBuildConfig } from 'unbuild'
 
 export default defineBuildConfig({
+  entries: [
+    './src/unplugin',
+    './src/vite'
+  ],
+  rollup: {
+    emitCJS: true
+  },
   replace: {
     'process.env.DEV': 'false'
   },
   hooks: {
     'mkdist:entry:options'(ctx, entry, options) {
       options.addRelativeDeclarationExtensions = false
     }
-  }
+  },
+  externals: ['#build/ui', 'vite']
 })

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.md → 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