Fix hydration issue + Edit Page (#1043)

nuxt.config.js

@@ -256,6 +256,9 @@ export default defineNuxtConfig({
         children: [],
       })
     },
+    'app:created'() {
+      console.log('beforeeeee')
+    },
   },
   runtimeConfig: {
     apiBaseUrl: process.env.BASE_URL ?? getApiUrl(),

pages/[type]/[id]/version/[version].vue

@@ -800,6 +800,10 @@ export default defineNuxtComponent({
 
     let replaceFile = null
 
+    if (mode === 'edit') {
+      isEditing = true
+    }
+
     if (route.params.version === 'create') {
       isCreating = true
       isEditing = true
@@ -839,8 +843,6 @@ export default defineNuxtComponent({
           console.error('Error parsing version file data', err)
         }
       }
-    } else if (mode === 'edit') {
-      isEditing = true
     } else if (route.params.version === 'latest') {
       let versionList = props.versions
       if (route.query.loader) {

plugins/1.theme.js

@@ -0,0 +1,25 @@
+export default defineNuxtPlugin((nuxtApp) => {
+  const themeStore = useTheme()
+
+  // TODO: Temporarily removed as it was causing hydration issues
+  // nuxtApp.hook('app:mounted', () => {
+  //   if (process.client && themeStore.value.preference === 'system') {
+  //     const colorSchemeQueryList = window.matchMedia('(prefers-color-scheme: light)')
+  //
+  //     const setColorScheme = (e) => {
+  //       if (themeStore.value.preference === 'system') {
+  //         if (e.matches) {
+  //           updateTheme('light')
+  //         } else {
+  //           updateTheme('dark')
+  //         }
+  //       }
+  //     }
+  //
+  //     setColorScheme(colorSchemeQueryList)
+  //     colorSchemeQueryList.addEventListener('change', setColorScheme)
+  //   }
+  // })
+
+  nuxtApp.provide('colorMode', themeStore.value)
+})

plugins/2.theme.js

@@ -1,24 +0,0 @@
-export default defineNuxtPlugin((nuxtApp) => {
-  const themeStore = useTheme()
-
-  if (process.client && themeStore.value.preference === 'system') {
-    setTimeout(() => {
-      const colorSchemeQueryList = window.matchMedia('(prefers-color-scheme: light)')
-
-      const setColorScheme = (e) => {
-        if (themeStore.value.preference === 'system') {
-          if (e.matches) {
-            updateTheme('light')
-          } else {
-            updateTheme('dark')
-          }
-        }
-      }
-
-      setColorScheme(colorSchemeQueryList)
-      colorSchemeQueryList.addEventListener('change', setColorScheme)
-    }, 100)
-  }
-
-  nuxtApp.provide('colorMode', themeStore.value)
-})