From a3a562b6991f654bb3274ceb670011438f9e2b69 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Fri, 17 Jan 2025 00:01:06 +0100
Subject: [PATCH] docs(app): improve `module` and `framework` reactivity

---
 docs/app/components/FrameworkSelect.vue |  4 ++++
 docs/app/components/Header.vue          | 14 ++++++++++++--
 docs/app/components/ModuleSelect.vue    |  4 ++++
 3 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/docs/app/components/FrameworkSelect.vue b/docs/app/components/FrameworkSelect.vue
index 193528a0..eb8191ed 100644
--- a/docs/app/components/FrameworkSelect.vue
+++ b/docs/app/components/FrameworkSelect.vue
@@ -6,6 +6,10 @@ const value = ref<string | undefined>(undefined)
 onMounted(() => {
   value.value = framework.value
 })
+
+watch(framework, () => {
+  value.value = framework.value
+})
 </script>
 
 <template>
diff --git a/docs/app/components/Header.vue b/docs/app/components/Header.vue
index 0b7adc1c..b8812007 100644
--- a/docs/app/components/Header.vue
+++ b/docs/app/components/Header.vue
@@ -9,6 +9,16 @@ const props = defineProps<{
 const config = useRuntimeConfig().public
 const { module } = useSharedData()
 
+const value = ref<string | undefined>(module.value)
+
+watch(module, () => {
+  value.value = module.value
+})
+
+onMounted(() => {
+  value.value = module.value
+})
+
 const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
 
 const items = computed(() => props.links.map(({ icon, ...link }) => link))
@@ -52,11 +62,11 @@ const items = computed(() => props.links.map(({ icon, ...link }) => link))
         <UContentSearchButton />
       </UTooltip>
 
-      <UTooltip text="Open on GitHub" :kbds="['meta', 'G']" class="hidden lg:flex">
+      <UTooltip text="Open on GitHub" class="hidden lg:flex">
         <UButton
           color="neutral"
           variant="ghost"
-          :to="`https://github.com/nuxt/${module}`"
+          :to="`https://github.com/nuxt/${value}`"
           target="_blank"
           icon="i-simple-icons-github"
           aria-label="GitHub"
diff --git a/docs/app/components/ModuleSelect.vue b/docs/app/components/ModuleSelect.vue
index 9312f8d0..17be49da 100644
--- a/docs/app/components/ModuleSelect.vue
+++ b/docs/app/components/ModuleSelect.vue
@@ -6,6 +6,10 @@ const value = ref<string | undefined>(undefined)
 onMounted(() => {
   value.value = module.value
 })
+
+watch(module, () => {
+  value.value = module.value
+})
 </script>
 
 <template>