Merge 6bd59f6051 into 3eaef4a748

apps/www/src/content/docs/installation/nuxt.md

@@ -27,28 +27,6 @@ If you encounter the error `ERROR: Cannot read properties of undefined (reading
 npm install -D typescript
 ```
 
-### Install TailwindCSS module
-
-```bash
-npx nuxi@latest module add @nuxtjs/tailwindcss
-```
-
-Alternatively, you can manually add `@nuxtjs/tailwindcss` using your dependency manager
-
-```bash
-npm install --save-dev @nuxtjs/tailwindcss
-```
-
-and then to the `modules` section of `nuxt.config.{ts,js}`
-
-```ts
-export default defineNuxtConfig({
-  modules: [
-    '@nuxtjs/tailwindcss'
-  ]
-})
-```
-
 ### Add `Nuxt` module
 
 <br>
@@ -56,7 +34,7 @@ export default defineNuxtConfig({
 <TabsMarkdown>
   <TabMarkdown title="shadcn-nuxt">
 
-  Install the package below.
+Installing the `shadcn-nuxt` module automatically installs and configures `@nuxtjs/tailwindcss` and `@nuxtjs/color-mode` modules.
 
   ```bash
  npx nuxi@latest module add shadcn-nuxt
@@ -177,6 +155,35 @@ declare module '@nuxt/schema' {
     shadcn?: ShadcnVueOptions;
   }
 }
+```
+
+### Install TailwindCss
+
+  ```bash
+npx nuxi@latest module add @nuxtjs/tailwindcss
+  ```
+
+If not configured automatically in the `nuxt.config.ts` file, configure it as shown below:
+
+```ts
+export default defineNuxtConfig({
+  modules: ['@nuxtjs/tailwindcss'],
+})
+```
+
+### Install Color Mode
+
+  ```bash
+npx nuxi module add color-mode
+  ```
+
+If not configured automatically in the `nuxt.config.ts` file, configure it as shown below:
+
+```ts
+export default defineNuxtConfig({
+  modules: ['...', '@nuxtjs/color-mode'],
+  classSuffix: ''
+})
 ```
 
   </TabMarkdown>
@@ -186,7 +193,7 @@ declare module '@nuxt/schema' {
 
 ```ts
 export default defineNuxtConfig({
-  modules: ['@nuxtjs/tailwindcss', 'shadcn-nuxt'],
+  modules: ['shadcn-nuxt'],
   shadcn: {
     /**
      * Prefix for all the imported component

packages/cli/src/commands/init.ts

@@ -4,7 +4,7 @@ import { Command } from 'commander'
 import { consola } from 'consola'
 import { colors } from 'consola/utils'
 import { template } from 'lodash-es'
-import { addDependency } from 'nypm'
+import { addDependency, addDevDependency } from 'nypm'
 import ora from 'ora'
 import path from 'pathe'
 import prompts from 'prompts'
@@ -39,6 +39,9 @@ const PROJECT_DEPENDENCIES = {
     'tailwind-merge',
     'radix-vue',
   ],
+  nuxt: [
+    'shadcn-nuxt',
+  ],
 }
 
 const initOptionsSchema = z.object({
@@ -309,10 +312,21 @@ export async function runInit(cwd: string, config: Config) {
   const iconsDep = config.style === 'new-york' ? ['@radix-icons/vue'] : ['lucide-vue-next']
   const deps = PROJECT_DEPENDENCIES.base.concat(iconsDep).filter(Boolean)
 
+  await Promise.allSettled(
+    [
+      config.framework === 'nuxt' && await addDevDependency(
+        [...PROJECT_DEPENDENCIES.nuxt, ...deps],
+        {
+          cwd,
+          silent: true,
+        },
+      ),
       await addDependency(deps, {
         cwd,
         silent: true,
-  })
+      }),
+    ],
+  )
 
   dependenciesSpinner?.succeed()
 }

packages/module/src/module.ts

@@ -63,7 +63,7 @@ export default defineNuxtModule<ModuleOptions>({
     await installModule('@nuxtjs/tailwindcss')
 
     // Installs the `@nuxtjs/color-mode` module.
-    await installModule('@nuxtjs/color-mode')
+    await installModule('@nuxtjs/color-mode', { classSuffix: '' })
 
     // Manually scan `componentsDir` for components and register them for auto imports
     try {