docs(app): improve framework hydration (#2780)

Co-authored-by: Sébastien Chopin <seb@nuxt.com>

docs/app/components/FrameworkSelect.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const { framework, frameworks } = useSharedData()
+const { frameworks } = useSharedData()
 </script>
 
 <template>
@@ -12,7 +12,6 @@ const { framework, frameworks } = useSharedData()
     <UButton
       color="neutral"
       variant="outline"
-      v-bind="frameworks.find(f => f.value === framework)"
       block
       trailing-icon="i-lucide-chevron-down"
       :class="[open && 'bg-[var(--ui-bg-elevated)]']"
@@ -20,6 +19,14 @@ const { framework, frameworks } = useSharedData()
         trailingIcon: ['transition-transform duration-200', open ? 'rotate-180' : undefined].filter(Boolean).join(' ')
       }"
       class="-mx-2 w-[calc(100%+1rem)]"
-    />
+    >
+      <template #leading>
+        <UIcon v-for="framework in frameworks" :key="framework.value" :name="framework.icon" :class="`${framework.value}-only`" class="shrink-0 size-5" />
+      </template>
+
+      <span v-for="framework in frameworks" :key="framework.value" :class="`${framework.value}-only`">
+        {{ framework.label }}
+      </span>
+    </UButton>
   </UDropdownMenu>
 </template>

docs/app/components/content/ComponentTheme.vue

@@ -56,16 +56,18 @@ const component = computed(() => {
   }
 })
 
-const { data: ast } = await useAsyncData(`component-theme-${name}-${framework.value}`, async () => {
+const { data: ast } = await useAsyncData(`component-theme-${name}`, async () => {
   const md = `
-::code-collapse
-${framework.value === 'nuxt'
-  ? `
+::code-collapse{class="nuxt-only"}
+
 \`\`\`ts [app.config.ts]
 export default defineAppConfig(${json5.stringify(component.value, null, 2).replace(/,([ |\t\n]+[}|\])])/g, '$1')})
 \`\`\`\
-`
-  : `
+
+::
+
+::code-collapse{class="vue-only"}
+
 \`\`\`ts [vite.config.ts]
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
@@ -81,7 +83,7 @@ export default defineConfig({
   ]
 })
 \`\`\`
-`}
+
 ::
 
 ${strippedCompoundVariants.value

docs/app/components/content/FrameworkOnly.vue

@@ -1,7 +1,12 @@
 <script setup lang="ts">
-const { framework } = useSharedData()
+import { Slot } from 'radix-vue'
 </script>
 
 <template>
-  <slot :name="framework" />
+  <Slot class="nuxt-only">
+    <slot name="nuxt" />
+  </Slot>
+  <Slot class="vue-only">
+    <slot name="vue" />
+  </Slot>
 </template>

docs/app/components/content/IconsTheme.vue

@@ -4,11 +4,10 @@ import icons from '../../../../src/theme/icons'
 
 const { framework } = useSharedData()
 
-const { data: ast } = await useAsyncData(`icons-theme-${framework.value}`, async () => {
+const { data: ast } = await useAsyncData(`icons-theme`, async () => {
   const md = `
-::code-collapse
-${framework.value === 'nuxt'
-  ? `
+::code-collapse{class="nuxt-only"}
+
 \`\`\`ts [app.config.ts]
 export default defineAppConfig(${json5.stringify({
   ui: {
@@ -16,8 +15,11 @@ export default defineAppConfig(${json5.stringify({
   }
 }, null, 2).replace(/,([ |\t\n]+[}|\])])/g, '$1')})
 \`\`\`\
-`
-  : `
+
+::
+
+::code-collapse{class="vue-only"}
+
 \`\`\`ts [vite.config.ts]
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
@@ -37,7 +39,7 @@ export default defineConfig({
   ]
 })
 \`\`\`
-`}
+
 ::
 `