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

build.config.ts

@@ -20,5 +20,5 @@ export default defineBuildConfig({
       options.addRelativeDeclarationExtensions = false
     }
   },
-  externals: ['#build/ui', 'vite']
+  externals: ['#build/ui', '#build/app.config', 'vite']
 })

docs/app/components/content/ComponentTheme.vue

@@ -101,12 +101,12 @@ export default defineAppConfig(${json5.stringify(component.value, null, 2).repla
 \`\`\`ts [vite.config.ts]
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
-import ui from '@nuxt/ui/vite'
+import ${props.pro ? 'uiPro' : 'ui'} from '${props.pro ? '@nuxt/ui-pro/vite' : '@nuxt/ui/vite'}'
 
 export default defineConfig({
   plugins: [
     vue(),
-    ui(${json5.stringify(component.value, null, 2).replace(/,([ |\t\n]+[}|\])])/g, '$1')
+    ${props.pro ? 'uiPro' : 'ui'}(${json5.stringify(component.value, 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

@@ -154,7 +154,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]
@@ -176,6 +178,29 @@ 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({
+      colors: {
+        primary: 'blue',
+        neutral: 'zinc'
+      }
+    })
+  ]
+})
+```
+:::
 
 ::
 
@@ -224,6 +249,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.
 
@@ -250,6 +277,34 @@ 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({
+      colors: {
+        tertiary: 'indigo'
+      },
+      uiPro: {
+        colors: ['primary', 'secondary', 'tertiary', 'info', 'success', 'warning', 'error']
+      }
+    })
+  ]
+})
+```
+
+:::
+
+::
 ::
 
 ### Tokens
@@ -783,7 +838,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:
@@ -808,7 +866,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({
+      uiPro: {
+        button: {
+          slots: {
+            base: 'font-bold'
+          }
+        }
+      }
+    })
+  ]
+})
+```
+:::
 ::
 
 ::

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

@@ -31,6 +31,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'
@@ -45,3 +48,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
+    })
+  ]
+})
+```
+:::
+::

package.json

@@ -42,7 +42,8 @@
   },
   "imports": {
     "#build/ui/*": "./.nuxt/ui/*.ts",
-    "#build/ui.css": "./.nuxt/ui.css"
+    "#build/ui.css": "./.nuxt/ui.css",
+    "#build/app.config": "./.nuxt/app.config.mjs"
   },
   "bin": {
     "nuxt-ui": "./cli/index.mjs"