docs(app): framework select global (#2719)

Co-authored-by: harlan <harlan@harlanzw.com>

docs/app/components/content/ComponentTheme.vue

@@ -4,14 +4,19 @@ import { camelCase } from 'scule'
 import * as theme from '#build/ui'
 
 const route = useRoute()
+const { framework } = useSharedData()
 
 const name = camelCase(route.params.slug?.[route.params.slug.length - 1] ?? '')
 
 const strippedCompoundVariants = ref(false)
 
-function stripCompoundVariants(component?: any) {
-  if (component?.compoundVariants) {
-    component.compoundVariants = component.compoundVariants.filter((compoundVariant: any) => {
+const strippedTheme = computed(() => {
+  const strippedTheme = {
+    ...(theme as any)[name]
+  }
+
+  if (strippedTheme?.compoundVariants) {
+    strippedTheme.compoundVariants = strippedTheme.compoundVariants.filter((compoundVariant: any) => {
       if (compoundVariant.color) {
         if (!['primary', 'neutral'].includes(compoundVariant.color)) {
           strippedCompoundVariants.value = true
@@ -40,24 +45,43 @@ function stripCompoundVariants(component?: any) {
     })
   }
 
-  return component
-}
+  return strippedTheme
+})
 
 const component = computed(() => {
   return {
     ui: {
-      [name]: stripCompoundVariants((theme as any)[name])
+      [name]: strippedTheme.value
     }
   }
 })
 
-const { data: ast } = await useAsyncData(`component-theme-${name}`, async () => {
+const { data: ast } = await useAsyncData(`component-theme-${name}-${framework.value}`, async () => {
   const md = `
 ::code-collapse
+${framework.value === 'nuxt'
+  ? `
 \`\`\`ts [app.config.ts]
 export default defineAppConfig(${json5.stringify(component.value, null, 2).replace(/,([ |\t\n]+[}|\])])/g, '$1')})
 \`\`\`\
+`
+  : `
+\`\`\`ts [vite.config.ts]
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import ui from '@nuxt/ui/vite'
 
+export default defineConfig({
+  plugins: [
+    vue(),
+    ui(${json5.stringify(component.value, null, 2).replace(/,([ |\t\n]+[}|\])])/g, '$1')
+      .split('\n')
+      .map((line, i) => i === 0 ? line : `    ${line}`)
+      .join('\n')})
+  ]
+})
+\`\`\`
+`}
 ::
 
 ${strippedCompoundVariants.value
@@ -69,7 +93,7 @@ Some colors in \`compoundVariants\` are omitted for readability. Check out the s
 `
 
   return parseMarkdown(md)
-})
+}, { watch: [framework] })
 </script>
 
 <template>