Skip to content

Commit 501137a

Browse files
selemondevselemon-dev
andauthoredAug 30, 2024··
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 <selemon@triply.co>
1 parent f73e1dd commit 501137a

File tree

2 files changed

+19
-9
lines changed

2 files changed

+19
-9
lines changed
 

‎apps/www/src/content/docs/dark-mode/nuxt.md

+9-7
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ description: Adding dark mode to your nuxt app.
77

88
<Steps>
99

10-
### Install Dependencies
10+
<!-- ### Install Dependencies
1111
1212
```bash
1313
npm install -D @nuxtjs/color-mode
@@ -25,19 +25,21 @@ export default defineNuxtConfig({
2525
classSuffix: ''
2626
}
2727
})
28-
```
29-
30-
Optional, to include icons for theme button.
31-
```bash
32-
npm install -D @iconify/vue @iconify-json/radix-icons
33-
```
28+
``` -->
3429

3530
### Add a mode toggle
3631

3732
Place a mode toggle on your site to toggle between light and dark mode.
3833

34+
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.
35+
3936
We're using [`useColorMode`](https://color-mode.nuxtjs.org/#usage) from [`Nuxt Color Mode`](https://color-mode.nuxtjs.org/).
4037

38+
Optional, to include icons for theme button.
39+
```bash
40+
npm install -D @iconify/vue @iconify-json/radix-icons
41+
```
42+
4143
```vue
4244
<script setup lang="ts">
4345
import { Icon } from '@iconify/vue'

‎packages/module/src/module.ts

+10-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { readFileSync, readdirSync } from 'node:fs'
22
import { join } from 'node:path'
33
import { parseSync } from '@oxc-parser/wasm'
4-
import { addComponent, addTemplate, createResolver, defineNuxtModule, findPath, useLogger } from '@nuxt/kit'
4+
import { addComponent, addTemplate, createResolver, defineNuxtModule, findPath, installModule, useLogger } from '@nuxt/kit'
55
import { UTILS } from '../../cli/src/utils/templates'
66

77
// TODO: add test to make sure all registry is being parse correctly
@@ -59,6 +59,14 @@ export default defineNuxtModule<ModuleOptions>({
5959
})
6060
})
6161

62+
// Installs the `@nuxtjs/color-mode` module.
63+
64+
await installModule('@nuxtjs/color-mode', {
65+
colorMode: {
66+
classSuffix: '',
67+
},
68+
})
69+
6270
// Manually scan `componentsDir` for components and register them for auto imports
6371
try {
6472
readdirSync(resolve(COMPONENT_DIR_PATH))
@@ -73,7 +81,7 @@ export default defineNuxtModule<ModuleOptions>({
7381

7482
const exportedKeys: string[] = ast.program.body
7583
.filter(node => node.type === 'ExportNamedDeclaration')
76-
// @ts-expect-error parse return any
84+
// @ts-expect-error parse return any
7785
.flatMap(node => node.specifiers.map(specifier => specifier.exported.name))
7886
.filter((key: string) => /^[A-Z]/.test(key))
7987

0 commit comments

Comments
 (0)
Please sign in to comment.