[Bug]: In a javascript nuxt project the components are created outside of the project root folder

[hubcio2115]

Environment

Developement/Production OS: macOS 14.2.1
Node version: 20.9.0
Package manager: [email protected]
Radix Vue version: 1.3.2
Shadcn Nuxt version: 0.8.7
Vue version: 3.4.14
Nuxt version: 3.9.3
Nuxt mode: universal
Nuxt target: server
CSS framework: @nuxtjs/[email protected]
Client OS: macOS 14.2.1

Link to minimal reproduction

https://github.com/hubcio2115/shadcn-nuxt-minimal-reproduction

Steps to reproduce

Run

npx shadcn-vue@latest init

Describe the bug

In a fresh javascript nuxt project with default configuration folders for lib and components get created outside of the project folder. Any subsequent runs of shadcn-vue add also put components outside of the project folder.

Everything works fine in a typescript project.

Expected behavior

components and lib are added to the project and components added through cli add are also put where they suppose to be as per the shadcn configuration.

Conext & Screenshots (if applicable)

[sadeghbarati]

https://stackblitz.com/edit/github-3ryei7

Add this to your nuxt.config.js/ts even if you are JS

export default defineNuxtConfig({
  typescript: {
    tsConfig: {
      compilerOptions: {
        baseUrl: '.'
      }
    }
  }
})

That's strange 😕

With tsconfig.json CLI is working as expected without "baseUrl": "." in ./.nuxt/tsconfig.json

But with jsconfig.json, "baseUrl": "." must be exist in ./.nuxt/tsconfig.json

[hubcio2115]

Oh, yeah that works but when I put it in jsconfig.json instead of nuxt.config it still bugs out. So the issue remains.

[sadeghbarati]

@Dunqing Can you also check this?

It's not related to detypes error in the carousel, calendar, vue-sonner components.

I explained it above

[Dunqing]

I will take a look soon.

[AdamBD]

I had the following problem during the init phase : npx shadcn-vue@latest init

✔ Would you like to use TypeScript (recommended)? … no
✔ Which framework are you using? › Nuxt
✔ Which style would you like to use? › Default
✔ Which color would you like to use as base color? › Slate
✔ Where is your global CSS file? … assets/main.css
✔ Would you like to use CSS variables for colors? … no
✔ Where is your tailwind.config located? … tailwind.config.js
✔ Configure the import alias for components: … @/components
✔ Configure the import alias for utils: … @/lib/utils
✔ Write configuration to components.json. Proceed? … yes

✔ Writing components.json...
ENOENT: no such file or directory, stat '/jsconfig.json'

I able to solve this problem by having the following jsconfig.json file in my project root before calling

{
  // https://nuxt.com/docs/guide/concepts/typescript
  "$schema": "https://json.schemastore.org/jsconfig.json",
  "extends": "./.nuxt/tsconfig.json",
  "compilerOptions": {
    "baseUrl": ".",
  }
}

In the initial instructions I skipped this step, because I have a js project. :

I believe that skipping this step causes the project to not have a config file.

I would add in a solution for js projects to the documentation.

However even though the init shows successful, as pointed out here the components and lib directory are created outside of project root.

I followed @sadeghbarati suggestion of adding this to nuxt.config.ts but it didnt work.

[AdamBD]

Anyone working on this?

[RamaHerbin]

I'm encountering the same issues as @AdamBD and @hubcio2115

[educbraga]

I had no issues following the CLI suggestions:

❯ npx shadcn-vue@latest init
✔ Would you like to use TypeScript? (recommended)? … no / yes
✔ Which framework are you using? › Nuxt
✔ Which style would you like to use? › Default
✔ Which color would you like to use as base color? › Slate
✔ Where is your tsconfig.json file? … .nuxt/tsconfig.json
✔ Where is your global CSS file? (this file will be overwritten) … assets/css/tailwind.css
✔ Would you like to use CSS variables for colors? … no / yes
✔ Where is your tailwind.config located? (this file will be overwritten) … tailwind.config.js
✔ Configure the import alias for components: … @/components
✔ Configure the import alias for utils: … @/lib/utils
✔ Write configuration to components.json. Proceed? … yes

Following the suggestions in the documentation item 7, the components are created outside of the project root folder:

[sugoidesune]

This fixed iit for me

npx [email protected] add tabs

[gormal]

I have Nuxt/TS project and this change in components.json fixed it for me. "tsConfigPath": "tsconfig.json" -> "tsConfigPath": "./.nuxt/tsconfig.json",

[AdamBD]

This fixed iit for me

npx [email protected] add tabs

how does this help with the components and lib directories being created outside of project root?

[AdamBD]

I have Nuxt/TS project and this change in components.json fixed it for me. "tsConfigPath": "tsconfig.json" -> "tsConfigPath": "./.nuxt/tsconfig.json",

this bug is related to JS installations, not TS

[sugoidesune]

This fixed iit for me

npx [email protected] add tabs

how does this help with the components and lib directories being created outside of project root?

Because the bug was introduced with [email protected] so using [email protected] works.

[sugoidesune]

this bug is related to JS installations, not TS

Definitely also exists in TS with [email protected]

[nulfrost]

I have Nuxt/TS project and this change in components.json fixed it for me. "tsConfigPath": "tsconfig.json" -> "tsConfigPath": "./.nuxt/tsconfig.json",

yep this fixed it for me whe using nuxt, I guess during the init steps you need to point inside of the .nuxt folder instead of the root tsconfig

[Erel0]

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  modules: ['@nuxtjs/tailwindcss', 'shadcn-nuxt'],
  shadcn: {
    /**
     * Prefix for all the imported component
     */
    prefix: '',
    /**
     * Directory that the component lives in.
     * @default "./components/ui"
     */
    componentDir: './components/ui'
  },
  typescript: {
    tsConfig: {
      compilerOptions: {
        baseUrl: '.'
      }
    }
  }
})

Then npx shadcn-vue@latest init

[ThamNithi]

I found that the component has just loaded to /.nuxt/components/ui/ so you've just copied and pasted it in the right path.

[murshex]

@zernonia Please fix this

[lukaspodmelle]

Still persists. However this in fact fixed it for me, so thank you @gormal :

I have Nuxt/TS project and this change in components.json fixed it for me. "tsConfigPath": "tsconfig.json" -> "tsConfigPath": "./.nuxt/tsconfig.json",

[realcryptopunk]

I have Nuxt/TS project and this change in components.json fixed it for me. "tsConfigPath": "tsconfig.json" -> "tsConfigPath": "./.nuxt/tsconfig.json",

Hey I've used this fix but this adds a folder named "*" everytime