feat: auto install @nuxtjs/color-mode module (#737)

* feat(app): #537 auto install the module This pull request is intended to install the module during the installation of the module Closes: #537 * docs: update Nuxt dark mode --------- Co-authored-by: selemondev-triply <[email protected]>
unovue · Aug 30, 2024 · 501137a · 501137a
1 parent f73e1dd
commit 501137a
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 9 deletions.
diff --git a/apps/www/src/content/docs/dark-mode/nuxt.md b/apps/www/src/content/docs/dark-mode/nuxt.md
@@ -7,7 +7,7 @@ description: Adding dark mode to your nuxt app.
 
 <Steps>
 
-### Install Dependencies
+<!-- ### Install Dependencies
 
 ```bash
 npm install -D @nuxtjs/color-mode
@@ -25,19 +25,21 @@ export default defineNuxtConfig({
     classSuffix: ''
   }
 })
-```
-
-Optional, to include icons for theme button.
-```bash
-npm install -D @iconify/vue @iconify-json/radix-icons
-```
+``` -->
 
 ### Add a mode toggle
 
 Place a mode toggle on your site to toggle between light and dark mode.
 
+The `@nuxtjs/color-mode` module is automatically installed and configured during the installation of the `shadcn-nuxt` module, so you literally have nothing to do.
+
 We're using [`useColorMode`](https://color-mode.nuxtjs.org/#usage) from [`Nuxt Color Mode`](https://color-mode.nuxtjs.org/).
 
+Optional, to include icons for theme button.
+```bash
+npm install -D @iconify/vue @iconify-json/radix-icons
+```
+
 ```vue
 <script setup lang="ts">
 import { Icon } from '@iconify/vue'

diff --git a/packages/module/src/module.ts b/packages/module/src/module.ts
@@ -1,7 +1,7 @@
 import { readFileSync, readdirSync } from 'node:fs'
 import { join } from 'node:path'
 import { parseSync } from '@oxc-parser/wasm'
-import { addComponent, addTemplate, createResolver, defineNuxtModule, findPath, useLogger } from '@nuxt/kit'
+import { addComponent, addTemplate, createResolver, defineNuxtModule, findPath, installModule, useLogger } from '@nuxt/kit'
 import { UTILS } from '../../cli/src/utils/templates'
 
 // TODO: add test to make sure all registry is being parse correctly
@@ -59,6 +59,14 @@ export default defineNuxtModule<ModuleOptions>({
       })
     })
 
+    // Installs the `@nuxtjs/color-mode` module.
+
+    await installModule('@nuxtjs/color-mode', {
+      colorMode: {
+        classSuffix: '',
+      },
+    })
+
     // Manually scan `componentsDir` for components and register them for auto imports
     try {
       readdirSync(resolve(COMPONENT_DIR_PATH))
@@ -73,7 +81,7 @@ export default defineNuxtModule<ModuleOptions>({
 
             const exportedKeys: string[] = ast.program.body
               .filter(node => node.type === 'ExportNamedDeclaration')
-            // @ts-expect-error parse return any
+              // @ts-expect-error parse return any
               .flatMap(node => node.specifiers.map(specifier => specifier.exported.name))
               .filter((key: string) => /^[A-Z]/.test(key))