refactor(CLI): base dependencies not installing when using shadcn-nuxt (#821)

* refactor: 815 shadcn-nuxt dependencies and CLI init

Closes: 815

* chore: remove unnecessary dependencies

* chore: update pnpm-lock.yaml file

* chore: cleanup

* chore: update pnpm-lock

---------

Co-authored-by: zernonia <zernonia@gmail.com>

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

@@ -47,11 +47,11 @@ Install `tailwindcss` and its peer dependencies, then generate your `tailwind.co
 ```typescript {3,4,11-15}
 import { fileURLToPath, URL } from 'node:url'
 
-import autoprefixer from 'autoprefixer'
-import tailwind from 'tailwindcss'
-
-import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import autoprefixer from 'autoprefixer'
+
+import tailwind from 'tailwindcss'
+import { defineConfig } from 'vite'
 
 // https://vite.dev/config/
 export default defineConfig({
@@ -128,11 +128,11 @@ npm i -D @types/node
 ```typescript {20-22}
 import { fileURLToPath, URL } from 'node:url'
 
-import autoprefixer from 'autoprefixer'
-import tailwind from 'tailwindcss'
-
-import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import autoprefixer from 'autoprefixer'
+
+import tailwind from 'tailwindcss'
+import { defineConfig } from 'vite'
 
 // https://vite.dev/config/
 export default defineConfig({

apps/www/src/lib/registry/default/ui/sidebar/SidebarMenuAction.vue

@@ -29,6 +29,6 @@ const props = withDefaults(defineProps<PrimitiveProps & {
     :as="as"
     :as-child="asChild"
   >
-    <slot/>
+    <slot />
   </Primitive>
 </template>

apps/www/src/lib/registry/new-york/ui/sidebar/SidebarMenuAction.vue

@@ -29,6 +29,6 @@ const props = withDefaults(defineProps<PrimitiveProps & {
     :as="as"
     :as-child="asChild"
   >
-    <slot/>
+    <slot />
   </Primitive>
 </template>

packages/cli/src/commands/init.ts

@@ -4,11 +4,10 @@ import { Command } from 'commander'
 import { consola } from 'consola'
 import { colors } from 'consola/utils'
 import { template } from 'lodash-es'
-import { addDependency, addDevDependency } from 'nypm'
+import { addDependency } from 'nypm'
 import ora from 'ora'
 import path from 'pathe'
 import prompts from 'prompts'
-import { gte } from 'semver'
 import { z } from 'zod'
 import {
   type Config,
@@ -40,9 +39,6 @@ const PROJECT_DEPENDENCIES = {
     'tailwind-merge',
     'radix-vue',
   ],
-  nuxt: [
-    '@nuxtjs/tailwindcss',
-  ],
 }
 
 const initOptionsSchema = z.object({
@@ -310,23 +306,13 @@ export async function runInit(cwd: string, config: Config) {
   // Install dependencies.
   const dependenciesSpinner = ora('Installing dependencies...')?.start()
 
-  // Starting from `shadcn-nuxt` version 0.10.4, Base dependencies are handled by the module so no need to re-add them by the CLI
-  const baseDeps = gte(shadcnNuxt?.version || '0.0.0', '0.10.4') ? [] : PROJECT_DEPENDENCIES.base
   const iconsDep = config.style === 'new-york' ? ['@radix-icons/vue'] : ['lucide-vue-next']
-  const deps = baseDeps.concat(iconsDep).filter(Boolean)
+  const deps = PROJECT_DEPENDENCIES.base.concat(iconsDep).filter(Boolean)
 
-  await Promise.allSettled(
-    [
-      config.framework === 'nuxt' && await addDevDependency(PROJECT_DEPENDENCIES.nuxt, {
-        cwd,
-        silent: true,
-      }),
-      await addDependency(deps, {
-        cwd,
-        silent: true,
-      }),
-    ],
-  )
+  await addDependency(deps, {
+    cwd,
+    silent: true,
+  })
 
   dependenciesSpinner?.succeed()
 }

packages/module/package.json

@@ -1,7 +1,7 @@
 {
   "name": "shadcn-nuxt",
   "type": "module",
-  "version": "0.11.0",
+  "version": "0.10.4",
   "description": "Add shadcn-vue module to Nuxt",
   "publishConfig": {
     "access": "public"
@@ -37,17 +37,15 @@
   "dependencies": {
     "@nuxt/kit": "^3.12.4",
     "@oxc-parser/wasm": "catalog:",
-    "class-variance-authority": "^0.7.0",
-    "tailwind-merge": "^2.5.2",
-    "tailwindcss-animate": "^1.0.7"
+    "typescript": "catalog:"
   },
   "devDependencies": {
     "@nuxt/eslint-config": "^0.5.0",
     "@nuxt/module-builder": "^0.8.2",
     "@nuxt/schema": "^3.12.4",
     "@nuxt/test-utils": "^3.14.0",
-    "@nuxtjs/color-mode": "^3.4.4",
-    "@nuxtjs/tailwindcss": "^6.12.1",
+    "@nuxtjs/color-mode": "^3.5.1",
+    "@nuxtjs/tailwindcss": "^6.12.2",
     "@types/node": "^20.14.15",
     "nuxt": "^3.12.4"
   }

packages/module/playground/components.json

@@ -2,11 +2,13 @@
   "$schema": "https://shadcn-vue.com/schema.json",
   "style": "default",
   "typescript": true,
+  "tsConfigPath": ".nuxt/tsconfig.json",
   "tailwind": {
     "config": "tailwind.config.js",
     "css": "assets/css/tailwind.css",
     "baseColor": "slate",
-    "cssVariables": true
+    "cssVariables": true,
+    "prefix": ""
   },
   "framework": "nuxt",
   "aliases": {

packages/module/playground/nuxt.config.ts

@@ -1,7 +1,8 @@
 export default defineNuxtConfig({
-  modules: ['@nuxtjs/tailwindcss', 'shadcn-nuxt'],
+  modules: ['shadcn-nuxt'],
   shadcn: {
     prefix: 'Ui',
   },
   devtools: { enabled: true },
+  compatibilityDate: '2024-11-04',
 })

packages/module/playground/package.json

@@ -8,13 +8,17 @@
     "generate": "nuxi generate"
   },
   "dependencies": {
-    "@nuxtjs/tailwindcss": "^6.10.1",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
     "embla-carousel-vue": "8.0.0-rc19",
-    "lucide-vue-next": "^0.276.0"
+    "lucide-vue-next": "^0.276.0",
+    "radix-vue": "^1.9.8",
+    "shadcn-nuxt": "^0.10.4",
+    "tailwind-merge": "^2.5.2",
+    "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
-    "@nuxtjs/tailwindcss": "^6.12.0",
-    "nuxt": "latest",
-    "shadcn-nuxt": "file:.."
+    "@nuxtjs/tailwindcss": "^6.12.2",
+    "nuxt": "latest"
   }
 }

packages/module/src/module.ts

@@ -59,8 +59,10 @@ export default defineNuxtModule<ModuleOptions>({
       })
     })
 
-    // Installs the `@nuxtjs/color-mode` module.
+    // Install the `@nuxtjs/tailwindcss` module.
+    await installModule('@nuxtjs/tailwindcss')
 
+    // Installs the `@nuxtjs/color-mode` module.
     await installModule('@nuxtjs/color-mode', {
       colorMode: {
         classSuffix: '',
@@ -90,7 +92,7 @@ export default defineNuxtModule<ModuleOptions>({
                 name: `${prefix}${key}`, // name of the component to be used in vue templates
                 export: key, // (optional) if the component is a named (rather than default) export
                 filePath: resolve(filePath),
-                priority: 1
+                priority: 1,
               })
             })
           }