feat: display i18n text on SSR

components/nav/NavSideItem.vue

@@ -66,7 +66,7 @@ const noUserVisual = computed(() => isMastoInitialised.value && props.userOnly &
           <div :class="icon" text-xl />
         </slot>
         <slot>
-          <span block sm:hidden xl:block>{{ isHydrated ? text : '&nbsp;' }}</span>
+          <span block sm:hidden xl:block>{{ text }}</span>
         </slot>
       </div>
     </CommonTooltip>

components/search/SearchWidget.vue

@@ -3,7 +3,6 @@ const query = ref('')
 const { accounts, hashtags, loading, statuses } = useSearch(query)
 const index = ref(0)
 
-const { t } = useI18n()
 const el = ref<HTMLElement>()
 const router = useRouter()
 const { focused } = useFocusWithin(el)
@@ -66,7 +65,7 @@ const activate = () => {
         bg-transparent
         outline="focus:none"
         pe-4
-        :placeholder="isHydrated ? t('nav.search') : ''"
+        :placeholder="$t('nav.search')"
         pb="1px"
         placeholder-text-secondary
         @keydown.down.prevent="shift(1)"
@@ -78,7 +77,7 @@ const activate = () => {
     <div left-0 top-12 absolute w-full z10 group-focus-within="pointer-events-auto visible" invisible pointer-events-none>
       <div w-full bg-base border="~ base" rounded-3 max-h-100 overflow-auto py2>
         <span v-if="query.trim().length === 0" block text-center text-sm text-secondary>
-          {{ t('search.search_desc') }}
+          {{ $t('search.search_desc') }}
         </span>
         <template v-else-if="!loading">
           <template v-if="results.length > 0">
@@ -90,7 +89,7 @@ const activate = () => {
             />
           </template>
           <span v-else block text-center text-sm text-secondary>
-            {{ t('search.search_empty') }}
+            {{ $t('search.search_empty') }}
           </span>
         </template>
         <div v-else>

pages/[[server]]/explore.vue

@@ -4,20 +4,20 @@ const { t } = useI18n()
 const tabs = $computed(() => [
   {
     to: isHydrated.value ? `/${currentServer.value}/explore` : '/explore',
-    display: isHydrated.value ? t('tab.posts') : '',
+    display: t('tab.posts'),
   },
   {
     to: isHydrated.value ? `/${currentServer.value}/explore/tags` : '/explore/tags',
-    display: isHydrated.value ? t('tab.hashtags') : '',
+    display: t('tab.hashtags'),
   },
   {
     to: isHydrated.value ? `/${currentServer.value}/explore/links` : '/explore/links',
-    display: isHydrated.value ? t('tab.news') : '',
+    display: t('tab.news'),
   },
   // This section can only be accessed after logging in
   {
     to: isHydrated.value ? `/${currentServer.value}/explore/users` : '/explore/users',
-    display: isHydrated.value ? t('tab.for_you') : '',
+    display: t('tab.for_you'),
     disabled: !isMastoInitialised.value || !currentUser.value,
   },
 ] as const)

pages/notifications.vue

@@ -10,12 +10,12 @@ const tabs = $computed(() => [
   {
     name: 'all',
     to: '/notifications',
-    display: isHydrated.value ? t('tab.notifications_all') : '',
+    display: t('tab.notifications_all'),
   },
   {
     name: 'mention',
     to: '/notifications/mention',
-    display: isHydrated.value ? t('tab.notifications_mention') : '',
+    display: t('tab.notifications_mention'),
   },
 ] as const)
 </script>