chore: fix docs module

Author: codebender828

components.d.ts

@@ -1,12 +1,12 @@
 /**
- * Typescript support for @@chakra-ui/vue-next1.0.0-alpha.13 auto-imported
+ * Typescript support for @@chakra-ui/vue-next2.0.0-beta.0 auto-imported
  * components using `unplugin-vue-components,`
  *
  * @see: https://github.com/antfu/unplugin-vue-components/#typescript
  *
  * This is a generated file. Do not edit it's contents.
  *
- * This file was generated on 2022-12-12T05:56:22.565Z
+ * This file was generated on 2022-12-21T00:42:42.934Z
  */
 
 import { ChakraProps, chakra } from "@chakra-ui/vue-system"

package.json

@@ -15,9 +15,13 @@
     "nohoist": [
       "**/@nuxt/content",
       "**/@nuxt/content/**",
+      "**/@nuxt/vite-builder",
+      "**/@nuxt/vite-builder/**",
       "**/add",
       "**/add/**",
       "**/nuxt",
+      "**/@nuxt/**",
+      "**/nuxt",
       "**/nuxt/**",
       "**/@babel/core",
       "**/@babel/core/**",

website/modules/chakra.module.ts

@@ -0,0 +1,19 @@
+import { defineNuxtModule } from "@nuxt/kit"
+import { extractCritical } from "@emotion/server"
+import { hydrate } from "@emotion/css"
+export default defineNuxtModule({
+  meta: {
+    // Usually  npm package name of your module
+    name: "@chakra-ui/nuxt-module",
+    // The key in `nuxt.config` that holds your module options
+    configKey: "chakra",
+    // Compatibility constraints
+    compatibility: {
+      // Semver version of supported nuxt versions
+      nuxt: "^3.0.0",
+    },
+  },
+  // Default configuration options for your module
+
+  async setup(moduleOptions, nuxt) {},
+})

website/nuxt.config.ts

@@ -4,7 +4,18 @@ export default defineNuxtConfig({
       routes: ["/docs/*", "/getting-started/*"],
     },
   },
-  modules: ["@nuxt/content"],
+  modules: [
+    "@nuxt/content",
+    (options, nuxt) => {
+      nuxt.hook("nitro:config", (config) => {
+        if (nuxt.options.dev) {
+          // Prevent inlining emotion (+ the crucial css cache!) in dev mode
+          config.externals.external ||= []
+          config.externals.external.push("@emotion/server")
+        }
+      })
+    },
+  ],
   build: {
     // @ts-ignore
     extend(config: { resolve: { alias: { vue$: string } } }, _ctx: any) {

website/package.json

@@ -27,7 +27,9 @@
     "@emotion/server": "^11.4.0",
     "@fontsource/dm-sans": "^4.5.9",
     "@fontsource/ibm-plex-mono": "^4.5.13",
+    "@nuxt/vite-builder": "^3.0.0",
     "@nuxtjs/color-mode": "^3.2.0",
+    "add": "^2.0.6",
     "feather-icons-paths": "^1.1.1",
     "highlight.js": "^11.7.0",
     "prismjs": "^1.29.0",

website/pages/foo.vue

@@ -0,0 +1,14 @@
+<template>
+  <div :class="className">Hello World</div>
+</template>
+
+<script lang="ts" setup>
+import { css } from "@emotion/css"
+
+const className = css({
+  backgroundColor: "tomato",
+  color: "white",
+  fontWeight: "bold",
+  padding: "2rem 3rem",
+})
+</script>

website/plugins/chakra.client.ts

@@ -1,4 +1,4 @@
-import ChakraUIVuePlugin, { chakra, extendChakra } from "@chakra-ui/vue-next"
+import ChakraUIVuePlugin, { chakra, extendTheme } from "@chakra-ui/vue-next"
 import { domElements } from "@chakra-ui/vue-system"
 
 import customTheme from "../assets/custom-theme"