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"}
-Nuxt UI Pro v3 does not support Vue yet.
-::
-
-::code-collapse{class="vue-only"}
+::code-collapse{class="vue-only ui-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