fix: omit value property of isHydrated in template (#681)

components/publish/PublishAttachment.vue

@@ -31,11 +31,11 @@ const toggleApply = () => {
         v-if="removable"
         :aria-label="$t('attachment.remove_label')"
         hover:bg="gray/40" transition-100 p-1 rounded-5 cursor-pointer
-        :class="[isHydrated.value && isSmallScreen ? '' : 'op-0 group-hover:op-100hover:']"
+        :class="[isHydrated && isSmallScreen ? '' : 'op-0 group-hover:op-100hover:']"
         mix-blend-difference
         @click="$emit('remove')"
       >
-        <div i-ri:close-line text-3 :class="[isHydrated.value && isSmallScreen ? 'text-6' : 'text-3']" />
+        <div i-ri:close-line text-3 :class="[isHydrated && isSmallScreen ? 'text-6' : 'text-3']" />
       </div>
     </div>
     <div absolute right-2 bottom-2>

composables/hydration.ts

@@ -1,14 +1,8 @@
-export const isHydrated = computed(() => {
-  if (process.server)
-    return { value: false }
+export const isHydrated = ref(false)
 
+if (!process.server) {
   const nuxtApp = useNuxtApp()
-  if (!nuxtApp.isHydrating)
-    return { value: false }
-
-  const hydrated = ref(false)
   nuxtApp.hooks.hookOnce('app:suspense:resolve', () => {
-    hydrated.value = true
+    isHydrated.value = true
   })
-  return hydrated
-})
+}

layouts/default.vue

@@ -45,8 +45,8 @@ const wideLayout = computed(() => route.meta.wideLayout ?? false)
           <slot />
         </div>
         <div sm:hidden sticky left-0 right-0 bottom-0 z-10 bg-base pb="[env(safe-area-inset-bottom)]" transition="padding 20">
-          <CommonOfflineChecker :small-screen="isHydrated.value" />
-          <NavBottom v-if="isHydrated.value" />
+          <CommonOfflineChecker :small-screen="isHydrated" />
+          <NavBottom v-if="isHydrated" />
         </div>
       </div>
       <aside v-if="!wideLayout" class="hidden sm:none lg:block w-1/4 zen-hide">

pages/[[server]]/explore/index.vue

@@ -13,7 +13,7 @@ useHeadFixed({
 </script>
 
 <template>
-  <CommonAlert v-if="isHydrated.value && !hideNewsTips" @close="hideNewsTips = true">
+  <CommonAlert v-if="isHydrated && !hideNewsTips" @close="hideNewsTips = true">
     <p>{{ $t('tooltip.explore_posts_intro') }}</p>
   </CommonAlert>
   <!-- TODO: Tabs for trending statuses, tags, and links -->

pages/[[server]]/explore/links.vue

@@ -13,7 +13,7 @@ useHeadFixed({
 </script>
 
 <template>
-  <CommonAlert v-if="isHydrated.value && !hideNewsTips" @close="hideNewsTips = true">
+  <CommonAlert v-if="isHydrated && !hideNewsTips" @close="hideNewsTips = true">
     <p>{{ $t('tooltip.explore_links_intro') }}</p>
   </CommonAlert>
 

pages/[[server]]/explore/tags.vue

@@ -22,7 +22,7 @@ useHeadFixed({
 </script>
 
 <template>
-  <CommonAlert v-if="isHydrated.value && !hideTagsTips && data && data.length" @close="hideTagsTips = true">
+  <CommonAlert v-if="isHydrated && !hideTagsTips && data && data.length" @close="hideTagsTips = true">
     <p>{{ $t('tooltip.explore_tags_intro') }}</p>
   </CommonAlert>
 

pages/settings.vue

@@ -21,8 +21,8 @@ const isRootPath = computedEager(() => route.name === 'settings')
           </template>
           <div xl:w-97 lg:w-78 w-full>
             <SettingsNavItem
-              v-show="currentUser"
-              :command="!!currentUser"
+              v-if="isHydrated && currentUser "
+              command
               icon="i-ri:user-line"
               :text="$t('settings.profile.label')"
               to="/settings/profile"

pages/settings/profile/appearance.vue

@@ -69,6 +69,7 @@ const { submit, submitting } = submitter(async ({ dirtyFields }) => {
         <!-- banner -->
         <div of-hidden bg="gray-500/20" aspect="3">
           <CommonInputImage
+            v-if="isHydrated"
             ref="elInputImage"
             v-model="form.header"
             :original="onlineSrc.header"
@@ -80,6 +81,7 @@ const { submit, submitting } = submitter(async ({ dirtyFields }) => {
         <!-- avatar -->
         <div px-4>
           <CommonInputImage
+            v-if="isHydrated"
             v-model="form.avatar"
             :original="onlineSrc.avatar"
             mt--10