How to Setup Nuxt with shadcn-vue (Fixes the @/components/ui Import Issues)

post.md

title	How to Setup Nuxt with shadcn/vue

How to Setup Nuxt with shadcn-vue (fixes the @/components/ui Import Issues)

• Docs for Reference

Create a new project

npx nuxi@latest init <project-name>
  - # select: `pnpm`

Create files/folders you'll need

cd <project-name>

mkdir -p assets/css && touch assets/css/tailwind.css
touch tailwind.config.js 
mkdir -p components/ui
mkdir -p lib && touch lib/utils.ts
mkdir pages && touch pages/index.vue

Finish project setup/install

pnpm install -D typescript

npx nuxi@latest module add @nuxtjs/tailwindcss

npx nuxi@latest module add shadcn-nuxt

Setup nuxt.config.ts

echo "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'
  }
})" > nuxt.config.ts

Setup tsconfig.json

echo '{
  "extends": "./.nuxt/tsconfig.json",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/components/*": ["./components/*"],
      "@/lib/*": ["./lib/*"],
      "@/*": ["./*"]  // Added to ensure @ resolves to the root
    }
  },
  "exclude": ["node_modules", ".nuxt", "dist"]
}' > tsconfig.json

Setup shadcn-vue

npx shadcn-vue@latest init

• Would you like to use TypeScript (recommended)?: 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?: ./assets/css/tailwind.css
• Do you want to use CSS variables for colors?: 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?: No

Add a shadcn component & test everything

npx shadcn-vue@latest add button

Test shadcn-vue <button> component

# put a shadcn button on the homepage
echo "<template>
  <div>
    <Button>This is a shadcn button</Button>
  </div>
</template>" > pages/index.vue

Setup app.vue

echo "<template>
  <div>
    <NuxtPage/>
  </div>
</template>" > app.vue

Run server

pnpm dev

Checkout these awesome shadcnUI components, libraries, projects, and more!