fix(ui): render kbd hints during SSR to prevent layout shift

Author: danielroe

app/components/Button/Base.vue

@@ -26,8 +26,7 @@ const props = withDefaults(
 
 const el = useTemplateRef('el')
 
-const keyboardShortcuts = useKeyboardShortcuts()
-const keyboardShortcutsEnabled = computed(() => import.meta.client && keyboardShortcuts.value)
+const keyboardShortcutsEnabled = useKeyboardShortcuts()
 
 defineExpose({
   focus: () => el.value?.focus(),
@@ -63,14 +62,12 @@ defineExpose({
   >
     <span v-if="classicon" class="size-[1em]" :class="classicon" aria-hidden="true" />
     <slot />
-    <ClientOnly>
-      <kbd
-        v-if="keyboardShortcutsEnabled && ariaKeyshortcuts"
-        class="ms-2 inline-flex items-center justify-center w-4 h-4 text-xs text-fg bg-bg-muted border border-border rounded no-underline"
-        aria-hidden="true"
-      >
-        {{ ariaKeyshortcuts }}
-      </kbd>
-    </ClientOnly>
+    <kbd
+      v-if="keyboardShortcutsEnabled && ariaKeyshortcuts"
+      class="ms-2 inline-flex items-center justify-center w-4 h-4 text-xs text-fg bg-bg-muted border border-border rounded no-underline"
+      aria-hidden="true"
+    >
+      {{ ariaKeyshortcuts }}
+    </kbd>
   </button>
 </template>

app/components/Link/Base.vue

@@ -59,8 +59,7 @@ const isLink = computed(() => props.variant === 'link')
 const isButton = computed(() => !isLink.value)
 const isButtonSmall = computed(() => props.size === 'small' && !isLink.value)
 const isButtonMedium = computed(() => props.size === 'medium' && !isLink.value)
-const keyboardShortcuts = useKeyboardShortcuts()
-const keyboardShortcutsEnabled = computed(() => import.meta.client && keyboardShortcuts.value)
+const keyboardShortcutsEnabled = useKeyboardShortcuts()
 </script>
 
 <template>
@@ -115,14 +114,12 @@ const keyboardShortcutsEnabled = computed(() => import.meta.client && keyboardSh
       class="i-lucide:link size-[1em] opacity-0 group-hover/link:opacity-100 transition-opacity duration-200"
       aria-hidden="true"
     />
-    <ClientOnly>
-      <kbd
-        v-if="keyboardShortcutsEnabled && ariaKeyshortcuts"
-        class="ms-2 inline-flex items-center justify-center size-4 text-xs text-fg bg-bg-muted border border-border rounded no-underline"
-        aria-hidden="true"
-      >
-        {{ ariaKeyshortcuts }}
-      </kbd>
-    </ClientOnly>
+    <kbd
+      v-if="keyboardShortcutsEnabled && ariaKeyshortcuts"
+      class="ms-2 inline-flex items-center justify-center size-4 text-xs text-fg bg-bg-muted border border-border rounded no-underline"
+      aria-hidden="true"
+    >
+      {{ ariaKeyshortcuts }}
+    </kbd>
   </NuxtLink>
 </template>