docs(app): enable support for @nuxt/ui-pro with vue (#3191)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Farnabaz <farnabaz@gmail.com>

docs/app/components/content/ComponentTheme.vue

@@ -96,7 +96,7 @@ export default defineAppConfig(${json5.stringify(component.value, null, 2).repla
 
 ::
 
-::code-collapse{class="vue-only"}
+::code-collapse{class="vue-only ui-only"}
 
 \`\`\`ts [vite.config.ts]
 import { defineConfig } from 'vite'
@@ -116,6 +116,26 @@ export default defineConfig({
 
 ::
 
+::code-collapse{class="vue-only ui-pro-only"}
+
+\`\`\`ts [vite.config.ts]
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import uiPro from '@nuxt/ui-pro/vite'
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    uiPro(${json5.stringify(component.value, null, 2).replace(/,([ |\t\n]+[}|\])])/g, '$1')
+      .split('\n')
+      .map((line, i) => i === 0 ? line : `    ${line}`)
+      .join('\n')})
+  ]
+})
+\`\`\`
+
+::
+
 ${strippedCompoundVariants.value
   ? `
 ::callout{icon="i-simple-icons-github" to="${themeLink.value}" title="Compound variants"}

docs/app/components/content/IconsTheme.vue

@@ -31,11 +31,7 @@ export default defineAppConfig(${json5.stringify({
 
 ::
 
-::caution{class="ui-pro-only vue-only"}
+::code-collapse{class="vue-only ui-only"}
-Nuxt UI Pro v3 does not support Vue yet.
-::
-
-::code-collapse{class="vue-only"}
 
 \`\`\`ts [vite.config.ts]
 import { defineConfig } from 'vite'
@@ -57,6 +53,30 @@ export default defineConfig({
 })
 \`\`\`
 
+::
+
+::code-collapse{class="vue-only ui-pro-only"}
+
+\`\`\`ts [vite.config.ts]
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import uiPro from '@nuxt/ui-pro/vite'
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    uiPro(${json5.stringify({
+      ui: {
+        icons
+      }
+    }, null, 2).replace(/,([ |\t\n]+[}|\])])/g, '$1')
+      .split('\n')
+      .map((line, i) => i === 0 ? line : `    ${line}`)
+      .join('\n')})
+  ]
+})
+\`\`\`
+
 ::
 `
 

docs/app/composables/useSharedData.ts

@@ -9,7 +9,6 @@ export function useSharedData() {
     label: 'Vue',
     icon: 'i-simple-icons-vuedotjs',
     value: 'vue',
-    disabled: module.value === 'ui-pro',
     onSelect: () => {
       if (module.value === 'ui-pro') {
         return
@@ -29,7 +28,6 @@ export function useSharedData() {
     label: 'UI Pro',
     icon: 'i-lucide-panels-top-left',
     value: 'ui-pro',
-    disabled: framework.value === 'vue',
     onSelect: () => {
       if (framework.value === 'vue') {
         return

docs/content/1.getting-started/3.theme.md

@@ -159,7 +159,9 @@ export default defineAppConfig({
 ::
 
 #vue
-::div
+::module-only
+#ui
+:::div
 You can configure these color aliases at runtime in your `vite.config.ts` file under the `ui.colors` key:
 
 ```ts [vite.config.ts]
@@ -181,6 +183,31 @@ export default defineConfig({
   ]
 })
 ```
+:::
+
+#ui-pro
+:::div
+You can configure these color aliases at runtime in your `vite.config.ts` file under the `uiPro.colors` key:
+```ts [vite.config.ts]
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import uiPro from '@nuxt/ui-pro/vite'
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    uiPro({
+      ui: {
+        colors: {
+          primary: 'blue',
+          neutral: 'zinc'
+        }
+      }
+    })
+  ]
+})
+```
+:::
 
 ::
 
@@ -229,6 +256,8 @@ export default defineNuxtConfig({
 :::
 
 #vue
+::module-only
+#ui
 :::tip
 You can add you own dynamic color aliases in your `vite.config.ts`, you just have to make sure to also define them in the [`theme.colors`](/getting-started/installation/vue#themecolors) option of the `ui` plugin.
 
@@ -255,6 +284,36 @@ export default defineConfig({
 ```
 
 :::
+
+#ui-pro
+:::tip
+You can add you own dynamic color aliases in your `vite.config.ts`, you just have to make sure to also define them in the [`theme.colors`](/getting-started/installation/vue#themecolors) option of the `uiPro` plugin.
+
+```ts [vite.config.ts]
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import uiPro from '@nuxt/ui-pro/vite'
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    uiPro({
+      ui: {
+        colors: {
+          tertiary: 'indigo'
+        },
+      },
+      theme: {
+        colors: ['primary', 'secondary', 'tertiary', 'info', 'success', 'warning', 'error']
+      }
+    })
+  ]
+})
+```
+
+:::
+
+::
 ::
 
 ### Tokens
@@ -788,7 +847,10 @@ export default defineAppConfig({
 ::
 
 #vue
-::div
+
+::module-only
+#ui
+:::div
 You can override the theme of components globally inside your `vite.config.ts` by using the exact same structure as the theme object.
 
 Let's say you want to change the font weight of all your buttons, you can do it like this:
@@ -813,7 +875,35 @@ export default defineConfig({
   ]
 })
 ```
+:::
 
+#ui-pro
+:::div
+You can override the theme of components globally inside your `vite.config.ts` by using the exact same structure as the theme object.
+
+Let's say you want to change the font weight of all your buttons, you can do it like this:
+
+```ts [vite.config.ts]
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import uiPro from '@nuxt/ui-pro/vite'
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    uiPro({
+      ui: {
+        button: {
+          slots: {
+            base: 'font-bold'
+          }
+        }
+      }
+    })
+  ]
+})
+```
+:::
 ::
 
 ::

docs/content/1.getting-started/6.color-mode/2.vue.md

@@ -32,6 +32,9 @@ const mode = useColorMode()
 
 You can disable this plugin with the `colorMode` option in your `vite.config.ts`:
 
+::module-only
+#ui
+:::div
 ```ts [vite.config.ts]
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
@@ -46,3 +49,24 @@ export default defineConfig({
   ]
 })
 ```
+
+:::
+ 
+#ui-pro
+:::div
+```ts [vite.config.ts]
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import uiPro from '@nuxt/ui-pro/vite'
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    uiPro({
+      colorMode: false
+    })
+  ]
+})
+```
+:::
+::

docs/package.json

@@ -10,7 +10,7 @@
     "@nuxt/content": "^3.2.2",
     "@nuxt/image": "^1.9.0",
     "@nuxt/ui": "latest",
-    "@nuxt/ui-pro": "https://pkg.pr.new/@nuxt/ui-pro@2b867b3",
+    "@nuxt/ui-pro": "https://pkg.pr.new/@nuxt/ui-pro@c02527f",
     "@nuxthub/core": "^0.8.17",
     "@nuxtjs/plausible": "^1.2.0",
     "@octokit/rest": "^21.1.1",

pnpm-lock.yaml

@@ -268,8 +268,8 @@ importers:
         specifier: workspace:*
         version: link:..
       '@nuxt/ui-pro':
-        specifier: https://pkg.pr.new/@nuxt/ui-pro@2b867b3
+        specifier: https://pkg.pr.new/@nuxt/ui-pro@c02527f
-        version: https://pkg.pr.new/@nuxt/ui-pro@2b867b3(magicast@0.3.5)(rollup@4.32.1)(typescript@5.6.3)
+        version: https://pkg.pr.new/@nuxt/ui-pro@c02527f(@babel/parser@7.26.9)(magicast@0.3.5)(rollup@4.32.1)(typescript@5.6.3)(vue@3.5.13(typescript@5.6.3))
       '@nuxthub/core':
         specifier: ^0.8.17
         version: 0.8.17(db0@0.2.4(better-sqlite3@11.8.1))(ioredis@5.5.0)(magicast@0.3.5)(rollup@4.32.1)(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.39.0)(yaml@2.7.0))
@@ -1735,8 +1735,8 @@ packages:
       vitest:
         optional: true
 
-  '@nuxt/ui-pro@https://pkg.pr.new/@nuxt/ui-pro@2b867b3':
+  '@nuxt/ui-pro@https://pkg.pr.new/@nuxt/ui-pro@c02527f':
-    resolution: {tarball: https://pkg.pr.new/@nuxt/ui-pro@2b867b3}
+    resolution: {tarball: https://pkg.pr.new/@nuxt/ui-pro@c02527f}
     version: 3.0.0-alpha.13
     peerDependencies:
       typescript: 5.6.3
@@ -8681,7 +8681,7 @@ snapshots:
       - typescript
       - yaml
 
-  '@nuxt/ui-pro@https://pkg.pr.new/@nuxt/ui-pro@2b867b3(magicast@0.3.5)(rollup@4.32.1)(typescript@5.6.3)':
+  '@nuxt/ui-pro@https://pkg.pr.new/@nuxt/ui-pro@c02527f(@babel/parser@7.26.9)(magicast@0.3.5)(rollup@4.32.1)(typescript@5.6.3)(vue@3.5.13(typescript@5.6.3))':
     dependencies:
       '@nuxt/kit': 3.15.4(magicast@0.3.5)(rollup@4.32.1)
       '@nuxt/schema': 3.15.4
@@ -8689,17 +8689,24 @@ snapshots:
       '@vueuse/core': 12.7.0(typescript@5.6.3)
       consola: 3.4.0
       defu: 6.1.4
+      dotenv: 16.4.7
       git-url-parse: 16.0.1
       ofetch: 1.4.1
       parse-git-config: 3.0.0
+      pathe: 2.0.3
       pkg-types: 1.3.1
       scule: 1.3.0
+      tinyglobby: 0.2.12
       typescript: 5.6.3
-      vue-component-type-helpers: 2.2.4
+      unplugin: 2.2.0
+      unplugin-auto-import: 19.1.0(@nuxt/kit@3.15.4(magicast@0.3.5)(rollup@4.32.1))(@vueuse/core@12.7.0(typescript@5.6.3))(rollup@4.32.1)
+      unplugin-vue-components: 28.4.0(@babel/parser@7.26.9)(@nuxt/kit@3.15.4(magicast@0.3.5)(rollup@4.32.1))(vue@3.5.13(typescript@5.6.3))
     transitivePeerDependencies:
+      - '@babel/parser'
       - magicast
       - rollup
       - supports-color
+      - vue
 
   '@nuxt/vite-builder@3.15.4(@types/node@22.13.5)(eslint@9.21.0(jiti@2.4.2))(lightningcss@1.29.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.32.1)(terser@5.39.0)(typescript@5.6.3)(vue-tsc@2.2.0(typescript@5.6.3))(vue@3.5.13(typescript@5.6.3))(yaml@2.7.0)':
     dependencies: