fix hydration errors (#190)

bcgov · Oct 19, 2024 · fc8494d · fc8494d
1 parent 6d3feda
commit fc8494d
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 32 deletions.
diff --git a/app/components/PPR/HeroBanner.vue b/app/components/PPR/HeroBanner.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const keycloak = reactive(useKeycloak())
+const { $keycloak } = useNuxtApp()
 const isSmallScreen = useMediaQuery('(max-width: 640px)')
 const localePath = useLocalePath()
 </script>
@@ -11,25 +11,27 @@ const localePath = useLocalePath()
         <p>
           {{ $t('page.ppr.intro.p1') }}
         </p>
-        <SbcAuthMenu v-if="!keycloak.isAuthenticated" :block="isSmallScreen" />
-        <div v-if="!keycloak.isAuthenticated">
-          <i18n-t keypath="page.ppr.intro.p2" tag="p" scope="global">
-            <template #link>
-              <a class="font-semibold text-[#1a5a96] underline" target="_blank" href="https://www.analytics.bcregistry.gov.bc.ca/">
-                {{ $t('btn.createRegAccount') }}
-              </a>
-            </template>
-          </i18n-t>
-        </div>
+        <ClientOnly>
+          <SbcAuthMenu v-if="!$keycloak.authenticated" :block="isSmallScreen" />
+          <div v-if="!$keycloak.authenticated">
+            <i18n-t keypath="page.ppr.intro.p2" tag="p" scope="global">
+              <template #link>
+                <a class="font-semibold text-[#1a5a96] underline" target="_blank" href="https://www.analytics.bcregistry.gov.bc.ca/">
+                  {{ $t('btn.createRegAccount') }}
+                </a>
+              </template>
+            </i18n-t>
+          </div>
 
-        <UButton
-          v-else
-          size="bcGov"
-          class="bg-bcGovColor-header font-semibold no-underline"
-          :label="$t('btn.goToBRD')"
-          :block="isSmallScreen"
-          :to="localePath('/dashboard')"
-        />
+          <UButton
+            v-else
+            size="bcGov"
+            class="bg-bcGovColor-header font-semibold no-underline"
+            :label="$t('btn.goToBRD')"
+            :block="isSmallScreen"
+            :to="localePath('/dashboard')"
+          />
+        </ClientOnly>
       </div>
     </div>
   </header>

diff --git a/app/layouts/default.vue b/app/layouts/default.vue
@@ -2,18 +2,14 @@
   <div
     class="mx-auto flex min-h-screen w-full flex-col bg-bcGovColor-gray1"
   >
-    <ClientOnly>
-      <ConnectHeader />
-      <ConnectSystemBanner />
-      <ConnectBreadcrumb />
-    </ClientOnly>
+    <ConnectHeader />
+    <ConnectSystemBanner />
+    <ConnectBreadcrumb />
     <main
       class="mx-auto w-full grow"
     >
       <slot />
     </main>
-    <ClientOnly>
-      <ConnectFooter />
-    </ClientOnly>
+    <ConnectFooter />
   </div>
 </template>
diff --git a/app/pages/dashboard.vue b/app/pages/dashboard.vue
@@ -24,8 +24,8 @@ onMounted(async () => {
 })
 </script>
 <template>
-  <UContainer class="py-6 sm:py-12">
-    <ClientOnly>
+  <ClientOnly>
+    <UContainer class="py-6 sm:py-12">
       <h1 class="text-[32px] font-semibold text-bcGovColor-darkGray">
         {{ $t('page.dashboard.h1') }}
       </h1>
@@ -89,6 +89,6 @@ onMounted(async () => {
       </div>
 
       <ConnectSpinner v-else overlay />
-    </ClientOnly>
-  </UContainer>
+    </UContainer>
+  </ClientOnly>
 </template>
diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -1,6 +1,6 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-  devtools: { enabled: false },
+  devtools: { enabled: true },
   ssr: true,
 
   future: {