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>