feat(nuxt): full ssr compatibility

Author: codebender828

packages/nuxt/src/module.ts

@@ -7,7 +7,11 @@ import {
   addPluginTemplate,
 } from "@nuxt/kit"
 import type * as NuxtSchema from "@nuxt/schema"
-import { ChakraPluginOptions } from "@chakra-ui/vue-next"
+import {
+  ChakraPluginOptions,
+  extendTheme as _extendTheme,
+} from "@chakra-ui/vue-next"
+import { mergeWith } from "@chakra-ui/utils"
 
 /** Chakra UI Vue SSR Context State */
 export interface ChakraUISSRContext {
@@ -22,15 +26,31 @@ declare global {
   }
 }
 
-export default defineNuxtModule<ChakraPluginOptions>({
+export type ChakraModuleOptions = Omit<ChakraPluginOptions, "colorModeManager">
+
+const defaultModuleOptions: ChakraModuleOptions = {
+  cssReset: true,
+  isBaseTheme: false,
+}
+
+export default defineNuxtModule<ChakraModuleOptions>({
   meta: {
     name: "@chakra-ui/nuxt-next",
     configKey: "chakra",
     compatibilty: ">=3.0.0",
   },
-  setup(_options, nuxt) {
+  setup(__options, nuxt) {
     console.log("chakra-ui-nuxt:module")
-    const theme = _options.extendTheme
+    const _options = mergeWith(
+      defaultModuleOptions,
+      __options
+    ) as ChakraModuleOptions
+
+    const extendTheme = _extendTheme(_options.extendTheme || {})
+    const icons = _options.icons
+    const isBaseTheme = _options.isBaseTheme
+    const emotionCacheOptions = _options.emotionCacheOptions
+    const cssReset = _options.cssReset
 
     // Install emotion module
     installModule("@nuxtjs/emotion")
@@ -40,18 +60,23 @@ export default defineNuxtModule<ChakraPluginOptions>({
     nuxt.options.build.transpile.push("@chakra-ui")
     nuxt.options.build.transpile.push(runtimeDir)
     addServerPlugin(resolve(runtimeDir, "chakra.server"))
-    // addPluginTemplate(resolve(templatesDir, "chakra.universal.t"))
-    addPluginTemplate({
-      src: resolve(templatesDir, "chakra.universal.t.js"),
-      options: {
-        theme: theme,
-        cssReset: true,
-        icons: {},
-        emotionCacheOptions: {
-          key: "chakra",
-        },
-        isBaseTheme: true,
-      } as ChakraPluginOptions,
-    })
+
+    // Resolve template and inject plugin
+    addPlugin(resolve(runtimeDir, "chakra.factory.universal"))
+    addPluginTemplate(
+      {
+        src: resolve(templatesDir, "chakra.universal.t.ts"),
+        options: {
+          extendTheme,
+          cssReset,
+          icons,
+          emotionCacheOptions,
+          isBaseTheme,
+        } as ChakraPluginOptions,
+      },
+      {
+        append: true,
+      }
+    )
   },
 })

packages/nuxt/src/runtime/chakra.factory.universal.ts

@@ -0,0 +1,24 @@
+import type * as NuxtAppTypes from "nuxt/app"
+import { defineNuxtPlugin } from "#imports"
+import Chakra, {
+  chakra,
+  cookieStorageManagerSSR,
+  extendChakra,
+  ColorModeConstants,
+  extendTheme,
+  ColorModeScriptProps,
+} from "@chakra-ui/vue-next"
+import { domElements } from "@chakra-ui/vue-system"
+import { parseCookies } from "h3"
+
+type AllowedSSRColorMode = Exclude<
+  ColorModeScriptProps["initialColorMode"],
+  "system"
+>
+
+export default defineNuxtPlugin((nuxtApp) => {
+  const app = nuxtApp.vueApp
+  domElements.forEach((tag) => {
+    app.component(`chakra.${tag}`, chakra(tag))
+  })
+})

packages/nuxt/src/runtime/chakra.universal.ts

@@ -1,13 +1,11 @@
 import { defineNuxtPlugin } from "#imports"
 import Chakra, {
-  chakra,
   cookieStorageManagerSSR,
   extendChakra,
   ColorModeConstants,
   ColorModeScriptProps,
-  ChakraPluginOptions,
+  extendTheme
 } from "@chakra-ui/vue-next"
-import { domElements } from "@chakra-ui/vue-system"
 import { parseCookies } from "h3"
 
 type AllowedSSRColorMode = Exclude<
@@ -46,6 +44,7 @@ export default defineNuxtPlugin((nuxtApp) => {
   // SSR Color Mode Handling
   let ssrColorMode: AllowedSSRColorMode
   const event = nuxtApp.ssrContext?.event
+
   if (event) {
     const parsedCookies = parseCookies(event)
     const colorMode = parsedCookies[ColorModeConstants.CookieStorageKey]
@@ -62,15 +61,25 @@ export default defineNuxtPlugin((nuxtApp) => {
 
   // Variable merging
   const cssReset = <%= options.cssReset %>
-  const icons = <%= JSON.stringify(options.icons, null, 2) %>
+  const icons = <%= JSON.stringify(options.icons || "NULL", null, 2) %>
   const isBaseTheme = <%= options.isBaseTheme %>
-  const emotionCacheOptions = <%= JSON.stringify(options.emotionCacheOptions || {}, null, 2) %>
+  const emotionCacheOptions = <%= JSON.stringify(options.emotionCacheOptions || "NULL", null, 2) %>
 
-  const pluginOptions: ChakraPluginOptions = {
+  const pluginOptions = {
     cssReset,
-    extendTheme: extendedTheme,
-    icons,
-    emotionCacheOptions,
+    extendTheme: extendTheme(extendedTheme, {
+      config: {
+        initialColorMode: isBrowser
+          ? window.$chakraSSRContext?.theme?.ssrColorMode
+          : ssrColorMode,
+      },
+    }),
+    ...(icons !== "NULL" && {
+      icons,
+    }),
+    ...(emotionCacheOptions !== "NULL" && {
+      emotionCacheOptions,
+    }),
     isBaseTheme
   }
 
@@ -84,8 +93,4 @@ export default defineNuxtPlugin((nuxtApp) => {
       ),
     })
   )
-
-  domElements.forEach((tag) => {
-    app.component(`chakra.${tag}`, chakra(tag))
-  })
 })