fix(cli): add an option to component.json to resolve nuxt buildDir (#447)

* fix(cli): add an option to `component.json` to resolve nuxt buildDir dynamically

* feat: add `tsConfigPath` option

* docs: updated installation docs to reflect the new option `tsConfigPath`

* feat: include option in init

---------

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

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

@@ -104,6 +104,7 @@ Would you like to use TypeScript (recommended)? no / yes
 Which framework are you using? Astro
 Which style would you like to use? › Default
 Which color would you like to use as base color? › Slate
+Where is your tsconfig.json located? › ./tsconfig.json
 Where is your global CSS file? › src/styles/globals.css
 Do you want to use CSS variables for colors? › no / yes
 Where is your tailwind.config located? › tailwind.config.mjs

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

@@ -30,6 +30,7 @@ Would you like to use TypeScript (recommended)? no / yes
 Which framework are you using? Vite / Nuxt / Laravel
 Which style would you like to use? › Default
 Which color would you like to use as base color? › Slate
+Where is your tsconfig.json located? › ./tsconfig.json
 Where is your global CSS file? › resources/css/app.css
 Do you want to use CSS variables for colors? › no / yes
 Where is your tailwind.config.js located? › tailwind.config.js

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

@@ -20,6 +20,7 @@ If you encounter the error `ERROR: Cannot read properties of undefined (reading
 ```bash
 npm install -D typescript
 ```
+
 ### Install TailwindCSS module
 
 ```bash
@@ -183,6 +184,7 @@ Would you like to use TypeScript (recommended)? no / yes
 Which framework are you using? Vite / Nuxt / Laravel
 Which style would you like to use? › Default
 Which color would you like to use as base color? › Slate
+Where is your tsconfig.json located? › ./tsconfig.json
 Where is your global CSS file? › › src/index.css
 Do you want to use CSS variables for colors? › no / yes
 Where is your tailwind.config.js located? › tailwind.config.js

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

@@ -75,7 +75,7 @@ Install `tailwindcss` and its peer dependencies, then generate your `tailwind.co
   npm install -D tailwindcss autoprefixer postcss
   ```
 
-  #### `postcss.config.js`
+#### `postcss.config.js`
 
   ```js
   module.exports = {
@@ -159,6 +159,7 @@ Would you like to use TypeScript (recommended)? no / yes
 Which framework are you using? Vite / Nuxt / Laravel
 Which style would you like to use? › Default
 Which color would you like to use as base color? › Slate
+Where is your tsconfig.json located? › ./tsconfig.json
 Where is your global CSS file? › › src/index.css
 Do you want to use CSS variables for colors? › no / yes
 Where is your tailwind.config.js located? › tailwind.config.js

package.json

@@ -17,6 +17,7 @@
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
     "dev:cli": "pnpm --filter shadcn-vue dev",
+    "dev:nuxt": "pnpm --filter shadcn-nuxt dev",
     "build:cli": "pnpm --filter shadcn-vue build",
     "build:registry": "pnpm --filter=www build:registry",
     "bumpp": "bumpp package.json packages/*/package.json apps/*/package.json",

packages/cli/src/commands/init.ts

@@ -135,6 +135,16 @@ export async function promptForConfig(
         value: color.name,
       })),
     },
+    {
+      type: 'text',
+      name: 'tsConfigPath',
+      message: (prev, values) => `Where is your ${highlight(values.typescript ? 'tsconfig.json' : 'jsconfig.json')} file?`,
+      initial: (prev, values) => {
+        const prefix = values.framework === 'nuxt' ? '.nuxt/' : './'
+        const path = values.typescript ? 'tsconfig.json' : 'jsconfig.json'
+        return prefix + path
+      },
+    },
     {
       type: 'text',
       name: 'tailwindCss',
@@ -189,6 +199,7 @@ export async function promptForConfig(
     $schema: 'https://shadcn-vue.com/schema.json',
     style: options.style,
     typescript: options.typescript,
+    tsConfigPath: options.tsConfigPath,
     framework: options.framework,
     tailwind: {
       config: options.tailwindConfig,

packages/cli/src/utils/get-config.ts

@@ -9,6 +9,7 @@ import { resolveImport } from '@/src/utils/resolve-import'
 export const DEFAULT_STYLE = 'default'
 export const DEFAULT_COMPONENTS = '@/components'
 export const DEFAULT_UTILS = '@/lib/utils'
+export const DEFAULT_TYPESCRIPT_CONFIG = './tsconfig.json'
 export const DEFAULT_TAILWIND_CONFIG = 'tailwind.config.js'
 export const DEFAULT_TAILWIND_BASE_COLOR = 'slate'
 
@@ -24,6 +25,7 @@ export const rawConfigSchema = z
     $schema: z.string().optional(),
     style: z.string(),
     typescript: z.boolean().default(true),
+    tsConfigPath: z.string().default(DEFAULT_TYPESCRIPT_CONFIG),
     tailwind: z.object({
       config: z.string(),
       css: z.string(),
@@ -68,7 +70,7 @@ export async function resolveConfigPaths(cwd: string, config: RawConfig) {
   let tsConfig: ConfigLoaderResult | undefined
   let tsConfigPath = path.resolve(
     cwd,
-    config.framework === 'nuxt' ? '.nuxt/tsconfig.json' : './tsconfig.json',
+    config.tsConfigPath,
   )
 
   if (config.typescript) {
@@ -83,10 +85,9 @@ export async function resolveConfigPaths(cwd: string, config: RawConfig) {
     }
   }
   else {
-    tsConfigPath = path.resolve(cwd, './jsconfig.json')
+    tsConfigPath = config.tsConfigPath.includes('tsconfig.json') ? path.resolve(cwd, './jsconfig.json') : path.resolve(cwd, config.tsConfigPath)
     tsConfig = loadConfig(tsConfigPath)
   }
-
   if (tsConfig.resultType === 'failed') {
     throw new Error(
         `Failed to load ${tsConfigPath}. ${tsConfig.message ?? ''}`.trim(),

packages/cli/test/utils/get-config.test.ts

@@ -19,6 +19,7 @@ it('get raw config', async () => {
       baseColor: 'neutral',
       cssVariables: false,
     },
+    tsConfigPath: './tsconfig.json',
     aliases: {
       components: '@/components',
       utils: '@/lib/utils',
@@ -55,6 +56,7 @@ it('get config', async () => {
       utils: '@/lib/utils',
     },
     framework: 'Vite',
+    tsConfigPath: './tsconfig.json',
     resolvedPaths: {
       tailwindConfig: path.resolve(
         __dirname,
@@ -102,6 +104,7 @@ it('get config', async () => {
       utils: '~/lib/utils',
     },
     framework: 'Vite',
+    tsConfigPath: './tsconfig.json',
     resolvedPaths: {
       tailwindConfig: path.resolve(
         __dirname,
@@ -148,6 +151,7 @@ it('get config', async () => {
       utils: '@/lib/utils',
     },
     framework: 'Vite',
+    tsConfigPath: './tsconfig.json',
     resolvedPaths: {
       tailwindConfig: path.resolve(
         __dirname,