fix: resolve SSR hydration and UI flashing (#1)

Author: cwandev

app/app.vue

@@ -20,11 +20,9 @@ const keepAliveRouteNames = computed(() => {
 
 <template>
   <VanConfigProvider :theme="mode">
-    <ColorScheme tag="div">
-      <NuxtLoadingIndicator color="repeating-linear-gradient(to right,var(--c-primary) 0%,var(--c-primary-active) 100%)" />
-      <NuxtLayout>
-        <NuxtPage :keepalive="{ include: keepAliveRouteNames }" />
-      </NuxtLayout>
-    </ColorScheme>
+    <NuxtLoadingIndicator color="repeating-linear-gradient(to right,var(--c-primary) 0%,var(--c-primary-active) 100%)" />
+    <NuxtLayout>
+      <NuxtPage :keepalive="{ include: keepAliveRouteNames }" />
+    </NuxtLayout>
   </VanConfigProvider>
 </template>

app/components/AppFooter.vue

@@ -5,15 +5,15 @@ const route = useRoute()
 
 const active = ref(0)
 
-const display = computed(() => {
+const show = computed(() => {
   if (route.name && names.includes(route.name))
     return true
   return false
 })
 </script>
 
 <template>
-  <van-tabbar v-show="display" v-model="active" route>
+  <van-tabbar v-if="show" v-model="active" route placeholder fixed>
     <van-tabbar-item replace to="/">
       <span>{{ $t('tabbar.home') }}</span>
       <template #icon>

app/components/AppHeader.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { useAppFooterRouteNames as routeWhiteList } from '~/config'
+
 const route = useRoute()
 const router = useRouter()
 
@@ -16,14 +18,15 @@ const title = computed(() => {
     return ''
   return route.meta.i18n ? t(route.meta.i18n) : (route.meta.title || '')
 })
+
+const showLeftArrow = computed(() => route.name && routeWhiteList.includes(route.name))
 </script>
 
 <template>
   <VanNavBar
-    v-show="title"
     :title="title"
-    :fixed="true"
-    clickable left-arrow
+    :left-arrow="!showLeftArrow"
+    placeholder clickable fixed
     @click-left="onBack"
   />
 </template>

app/layouts/default.vue

@@ -1,18 +1,8 @@
-<script setup lang="ts">
-import { useAppFooterRouteNames as names } from '~/config'
-
-const route = useRoute()
-
-const classNames = computed(() => {
-  return route.name && names.includes(route.name) ? 'py-20' : 'px-10 pt-60'
-})
-</script>
-
 <template>
-  <main>
-    <AppHeader />
+  <main class="flex flex-col min-h-svh">
+    <AppHeader class="h-[var(--van-nav-bar-height)]" />
 
-    <div :class="classNames">
+    <div class="flex-1 p-16 pb-[var(--van-nav-bar-height)]">
       <slot />
     </div>
 

app/pages/index.vue

@@ -4,6 +4,12 @@ import type { PickerColumn } from 'vant'
 import type { ComputedRef } from 'vue'
 import { Locale } from 'vant'
 
+definePageMeta({
+  layout: 'default',
+  title: '主页',
+  i18n: 'menu.home',
+})
+
 const color = useColorMode()
 
 useHead({
@@ -17,14 +23,10 @@ useHead({
 const checked = computed({
   get: () => color.value === 'dark',
   set: (val: boolean) => {
-    return val
+    color.preference = val ? 'dark' : 'light'
   },
 })
 
-function toggleDark() {
-  color.preference = color.value === 'dark' ? 'light' : 'dark'
-}
-
 const { setLocale, t } = useI18n()
 const i18n = useNuxtApp().$i18n
 
@@ -57,12 +59,13 @@ function onLanguageConfirm(event: { selectedOptions: PickerColumn }) {
     <VanCellGroup inset>
       <VanCell :title="$t('menu.darkMode')" center>
         <template #right-icon>
-          <VanSwitch
-            v-model="checked"
-            size="20px"
-            aria-label="on/off Dark Mode"
-            @click="toggleDark"
-          />
+          <ClientOnly>
+            <VanSwitch
+              v-model="checked"
+              size="20px"
+              aria-label="on/off Dark Mode"
+            />
+          </ClientOnly>
         </template>
       </VanCell>
 

app/pages/profile/index.vue

@@ -1,3 +1,11 @@
+<script setup lang="ts">
+definePageMeta({
+  layout: 'default',
+  title: '我的',
+  i18n: 'menu.profile',
+})
+</script>
+
 <template>
   <div mx-auto mb-60 pt-15 text-center text-16 text-dark dark:text-white>
     {{ $t('profile_page.txt') }}

app/styles/default-theme.css

@@ -1,3 +1,4 @@
 :root:root {
   --van-primary-color: var(--c-primary);
+  --van-cell-group-inset-padding: 0;
 }

app/utils/preload.ts

@@ -0,0 +1,10 @@
+export default function preload() {
+  return `
+    ;(function() {
+      const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+      const setting = localStorage.getItem('nuxt-color-mode') || 'auto';
+      if (setting === 'dark' || (prefersDark && setting !== 'light'))
+        document.documentElement.classList.toggle('van-theme-dark', true);
+    })()
+  `
+}

i18n/locales/en-US.json

@@ -1,5 +1,7 @@
 {
   "menu": {
+    "home": "Home",
+    "profile": "Profile",
     "darkMode": "🌗 Dark Mode",
     "language": "📚 Language",
     "404Demo": "🙅 Page 404 Demo",

i18n/locales/zh-CN.json

@@ -1,5 +1,7 @@
 {
   "menu": {
+    "home": "主页",
+    "profile": "我的",
     "darkMode": "🌗 暗黑模式",
     "language": "📚 语言",
     "404Demo": "🙅 404页 演示",