feat(nuxt): enable component auto-import

Author: codebender828

examples/nuxt-app/app.vue

@@ -1,5 +1,5 @@
 <template>
-  <chakra.div
+  <c-h-stack
     display="flex"
     min-h="600px"
     justify-content="center"
@@ -13,13 +13,13 @@
       color="white"
       font-weight="bold"
     >
-      Click me to toggle. ({{ colorMode }})
+      Click me to toggle | {{ colorMode }}
     </chakra.button>
 
     <chakra.button px="4" py="3" bg="$brand" font-weight="bold">
       Extended Component
     </chakra.button>
-  </chakra.div>
+  </c-h-stack>
 </template>
 
 <script lang="ts" setup>

packages/c-modal/src/c-alert-dialog.tsx

@@ -8,6 +8,14 @@ import {
   CModalContentProps,
 } from "./c-modal"
 
+import {
+  CModalBody,
+  CModalCloseButton,
+  CModalFooter,
+  CModalHeader,
+  CModalOverlay,
+} from "./c-modal"
+
 export interface CAlertDialogProps
   extends Omit<CModalProps, "initialFocusRef" | "closeModal" | "handleEscape"> {
   leastDestructiveRef: CModalProps["initialFocusRef"]
@@ -72,10 +80,27 @@ export const CAlertDialogContent = defineComponent({
   },
 })
 
-export {
-  CModalBody as CAlertDialogBody,
-  CModalCloseButton as CAlertDialogCloseButton,
-  CModalFooter as CAlertDialogFooter,
-  CModalHeader as CAlertDialogHeader,
-  CModalOverlay as CAlertDialogOverlay,
-} from "./c-modal"
+export const CAlertDialogBody = defineComponent({
+  name: "CAlertDialogBody",
+  extends: CModalBody,
+})
+
+export const CAlertDialogCloseButton = defineComponent({
+  name: "CAlertDialogCloseButton",
+  extends: CModalCloseButton,
+})
+
+export const CAlertDialogFooter = defineComponent({
+  name: "CAlertDialogFooter",
+  extends: CModalFooter,
+})
+
+export const CAlertDialogHeader = defineComponent({
+  name: "CAlertDialogHeader",
+  extends: CModalHeader,
+})
+
+export const CAlertDialogOverlay = defineComponent({
+  name: "CAlertDialogOverlay",
+  extends: CModalOverlay,
+})

packages/c-modal/src/c-drawer.tsx

@@ -19,15 +19,23 @@ import {
 import { createContext } from "@chakra-ui/vue-utils"
 import {
   chakra,
-  ComponentWithProps,
-  DeepPartial,
   HTMLChakraProps,
   SystemStyleObject,
   useStyles,
   useTheme,
 } from "@chakra-ui/vue-system"
 
-import { CModal, CModalProps, modalProps, useModalContext } from "./c-modal"
+import {
+  CModal,
+  CModalBody,
+  CModalCloseButton,
+  CModalFooter,
+  CModalHeader,
+  CModalOverlay,
+  CModalProps,
+  modalProps,
+  useModalContext,
+} from "./c-modal"
 import { MotionDirective, useMotions } from "@vueuse/motion"
 import { useId } from "@chakra-ui/vue-composables"
 
@@ -232,10 +240,27 @@ export const CDrawerContent = defineComponent({
   },
 })
 
-export {
-  CModalBody as CDrawerBody,
-  CModalCloseButton as CDrawerCloseButton,
-  CModalFooter as CDrawerFooter,
-  CModalHeader as CDrawerHeader,
-  CModalOverlay as CDrawerOverlay,
-} from "./c-modal"
+export const CDrawerBody = defineComponent({
+  name: "CDrawerBody",
+  extends: CModalBody,
+})
+
+export const CDrawerCloseButton = defineComponent({
+  name: "CDrawerCloseButton",
+  extends: CModalCloseButton,
+})
+
+export const CDrawerFooter = defineComponent({
+  name: "CDrawerFooter",
+  extends: CModalFooter,
+})
+
+export const CDrawerHeader = defineComponent({
+  name: "CDrawerHeader",
+  extends: CModalHeader,
+})
+
+export const CDrawerOverlay = defineComponent({
+  name: "CDrawerOverlay",
+  extends: CModalOverlay,
+})

packages/nuxt/src/module.ts

@@ -5,13 +5,15 @@ import {
   addServerPlugin,
   installModule,
   addPluginTemplate,
+  addComponent,
 } from "@nuxt/kit"
 import type * as NuxtSchema from "@nuxt/schema"
 import {
   ChakraPluginOptions,
   extendTheme as _extendTheme,
 } from "@chakra-ui/vue-next"
 import { mergeWith } from "@chakra-ui/utils"
+import * as ChakraComponents from "@chakra-ui/vue-next"
 
 /** Chakra UI Vue SSR Context State */
 export interface ChakraUISSRContext {
@@ -26,6 +28,26 @@ declare global {
   }
 }
 
+function getChakraComponents() {
+  const Components = []
+  const _ChakraComponents = ChakraComponents as Record<string, any>
+  for (const component in _ChakraComponents) {
+    /**
+     * Group of strict checks to make sure that
+     * we only generate types for components.
+     */
+    if (
+      component.startsWith("C") &&
+      _ChakraComponents[component]?.name &&
+      _ChakraComponents[component]?.setup &&
+      typeof _ChakraComponents[component]?.setup === "function"
+    ) {
+      Components.push(_ChakraComponents[component])
+    }
+  }
+
+  return Components
+}
 export type ChakraModuleOptions = Omit<ChakraPluginOptions, "colorModeManager">
 
 const defaultModuleOptions: ChakraModuleOptions = {
@@ -59,9 +81,17 @@ export default defineNuxtModule<ChakraModuleOptions>({
     const templatesDir = resolve("./templates")
     nuxt.options.build.transpile.push("@chakra-ui")
     nuxt.options.build.transpile.push(runtimeDir)
-    addServerPlugin(resolve(runtimeDir, "chakra.server"))
+
+    for (const Component of getChakraComponents()) {
+      addComponent({
+        name: Component.name,
+        export: Component.name,
+        filePath: "@chakra-ui/vue-next",
+      })
+    }
 
     // Resolve template and inject plugin
+    addServerPlugin(resolve(runtimeDir, "chakra.server"))
     addPlugin(resolve(runtimeDir, "chakra.factory.universal"))
     addPluginTemplate(
       {