Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: NuxtJS installation process targets the wrong directory #806

Open
2 tasks done
long-win opened this issue Oct 11, 2024 · 4 comments
Open
2 tasks done

[Bug]: NuxtJS installation process targets the wrong directory #806

long-win opened this issue Oct 11, 2024 · 4 comments
Labels
bug Something isn't working

Comments

@long-win
Copy link

Reproduction

After running npx shadcn-vue@latest init

Describe the bug

I ran the init command in the root directory of my Nuxt project and the component and utils folder were created in the folder one level above my project root directory.

I followed everything in the installation instruction, namely

  1. npx nuxi@latest init nuxt-shadcn-project
  2. cd ~/projects/nuxt-shadcn-project
  3. npm install -D typescript
  4. npx nuxi@latest module add @nuxtjs/tailwindcss
  5. npx nuxi@latest module add shadcn-nuxt
  6. Configure nuxt.config.ts
    `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'
      }
      })`
  7. 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 or jsconfig.json file? › ./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 Configure the import alias for components: › @/components Configure the import alias for utils: › @/lib/utils Write configuration to components.json. Proceed? > Y/n

Let's say my project folder structure is as follows:
What I expected
projects
|── nuxt-shadcn-project
| |── components
| |── lib
| |── utils.ts

What it turns out to be
projects
|── nuxt-shadcn-project
|── components
|── lib
|── utils.ts

I have double checked everything and rerun the whole thing at least 5 times, including nuxt.config.ts

System Info

System:
    OS: macOS 15.0
    CPU: (10) arm64 Apple M1 Pro
    Memory: 272.13 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.19.0 - /usr/local/bin/node
    npm: 10.2.3 - /usr/local/bin/npm
  Browsers:
    Chrome: 129.0.6668.100
    Edge: 129.0.2792.89
    Safari: 18.0
  npmPackages:
    nuxt: ^3.13.0 => 3.13.2
    radix-vue: ^1.9.7 => 1.9.7
    shadcn-nuxt: ^0.10.4 => 0.10.4
    vue: latest => 3.5.12

Contributes

  • I am willing to submit a PR to fix this issue
  • I am willing to submit a PR with failing tests
@long-win long-win added the bug Something isn't working label Oct 11, 2024
@gavinhar
Copy link

I've seen the same issue. Work around until this gets fixed is to copy things from ./components/ui and ./lib into .//components/ui and ./ into .//lib

@ThePromiseBenard
Copy link

This is same with me, i kept thinking I was doing something bad as well.

@sadeghbarati
Copy link
Collaborator

Maybe Related to #291

#291 (comment)

@juanjcardona13
Copy link

Related to #864

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants