Niklas/shadcn-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
* 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>
This commit is contained in:
Selemondev 2024-08-30 21:02:24 +03:00 committed by GitHub
parent f73e1ddaaf
commit 501137a672
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 19 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
apps/www/src/content/docs/dark-mode/nuxt.md
View File

@ -7,7 +7,7 @@ description: Adding dark mode to your nuxt app.
<Steps> <Steps>
### Install Dependencies <!-- ### Install Dependencies
```bash ```bash
npm install -D @nuxtjs/color-mode npm install -D @nuxtjs/color-mode
@ -25,19 +25,21 @@ export default defineNuxtConfig({
classSuffix: '' classSuffix: ''
} }
}) })
``` ``` -->
Optional, to include icons for theme button.
```bash
npm install -D @iconify/vue @iconify-json/radix-icons
```
### Add a mode toggle ### Add a mode toggle
Place a mode toggle on your site to toggle between light and dark mode. 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/). 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 ```vue
<script setup lang="ts"> <script setup lang="ts">
import { Icon } from '@iconify/vue' import { Icon } from '@iconify/vue'

10
packages/module/src/module.ts
View File

@ -1,7 +1,7 @@
import { readFileSync, readdirSync } from 'node:fs' import { readFileSync, readdirSync } from 'node:fs'
import { join } from 'node:path' import { join } from 'node:path'
import { parseSync } from '@oxc-parser/wasm' 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' import { UTILS } from '../../cli/src/utils/templates'
// TODO: add test to make sure all registry is being parse correctly // 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 // Manually scan `componentsDir` for components and register them for auto imports
try { try {
readdirSync(resolve(COMPONENT_DIR_PATH)) readdirSync(resolve(COMPONENT_DIR_PATH))