docs: add @nuxt/ui-pro source (#2775)

docs/app/components/content/IconsTheme.vue

@@ -2,11 +2,12 @@
 import json5 from 'json5'
 import icons from '../../../../src/theme/icons'
 
-const { framework } = useSharedData()
+const appConfig = useAppConfig()
+const { framework, module } = useSharedData()
 
 const { data: ast } = await useAsyncData(`icons-theme`, async () => {
   const md = `
-::code-collapse{class="nuxt-only"}
+::code-collapse{class="ui-only nuxt-only"}
 
 \`\`\`ts [app.config.ts]
 export default defineAppConfig(${json5.stringify({
@@ -18,6 +19,22 @@ export default defineAppConfig(${json5.stringify({
 
 ::
 
+::code-collapse{class="ui-pro-only nuxt-only"}
+
+\`\`\`ts [app.config.ts]
+export default defineAppConfig(${json5.stringify({
+  ui: {
+    icons: appConfig.ui.icons
+  }
+}, null, 2).replace(/,([ |\t\n]+[}|\])])/g, '$1')})
+\`\`\`\
+
+::
+
+::caution{class="ui-pro-only vue-only"}
+Nuxt UI Pro v3 does not support Vue yet.
+::
+
 ::code-collapse{class="vue-only"}
 
 \`\`\`ts [vite.config.ts]
@@ -44,7 +61,7 @@ export default defineConfig({
 `
 
   return parseMarkdown(md)
-}, { watch: [framework] })
+}, { watch: [framework, module] })
 </script>
 
 <template>

docs/app/components/content/ModuleOnly.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { Slot } from 'reka-ui'
+</script>
+
+<template>
+  <Slot class="ui-only">
+    <slot name="ui" />
+  </Slot>
+  <Slot class="ui-pro-only">
+    <slot name="ui-pro" />
+  </Slot>
+</template>