Installation Guide: Nuxt.js and ShadCN (Latest Version)

Nuxt.js is a Vue.js-based framework that allows you to build fast, well-structured, and maintainable web applications.
Meanwhile, ShadCN is a component-based UI design system widely used in app development to enhance the user experience.

In this article, we’ll walk you through the steps to install Nuxt.js and ShadCN into your frontend project.

---

1. Initial Setup

Before starting, ensure you have Node.js and npm (Node Package Manager) installed.
You can download and install them from the official Node.js website.

Check Node.js and npm installation

Open your terminal or command prompt and run:

node -v
npm -v

If both commands return a version number, you’re good to go.

---

2. Creating a New Nuxt.js Project

Once Node.js and npm are ready, the first step is to create a new Nuxt.js project.

Step 1: Install create-nuxt-app

create-nuxt-app is a CLI tool for quickly setting up a Nuxt.js project.
Run:

npm init nuxt-app@latest

You’ll be prompted with several configuration options, such as:

• Project name
• CSS template (Tailwind, SCSS, etc.)
• Linting options (ESLint, Prettier, etc.)
• Additional modules (Axios, Content, PWA, etc.)

Step 2: Run Nuxt.js application

After installation, navigate to your project folder and run:

cd project-name
npm run dev

You can now access your Nuxt.js application at http://localhost:3000.

---

3. Adding ShadCN to a Nuxt.js Project

ShadCN heavily relies on Tailwind CSS for styling, so make sure Tailwind is installed first.

Step 1: Install Tailwind CSS 4

If you haven’t yet, run:

npm install tailwindcss @tailwindcss/vite

Nuxt Config Setup (nuxt.config.ts):

import tailwindcss from "@tailwindcss/vite";

export default defineNuxtConfig({
  compatibilityDate: "2025-07-15",
  devtools: { enabled: true },
  vite: {
    plugins: [tailwindcss()],
  },
});

CSS file (assets/css/main.css):

@import "tailwindcss";

Include in Nuxt config (nuxt.config.js):

import tailwindcss from "@tailwindcss/vite";

export default defineNuxtConfig({
  compatibilityDate: "2025-07-15",
  devtools: { enabled: true },
  css: ["~/assets/css/main.css"],
  vite: {
    plugins: [tailwindcss()],
  },
});

Restart the server:

npm run dev

Step 2: Install and Use ShadCN

Install ShadCN:

npx nuxi@latest module add shadcn-nuxt

Some components require ssrWidth from VueUse to avoid hydration errors on mobile.

Create the following plugin in your Nuxt application:
For Nuxt v4: app/plugins/ssr-width.ts
For Nuxt v3: plugins/ssr-width.ts

import { provideSSRWidth } from "@vueuse/core";

export default defineNuxtPlugin((nuxtApp) => {
  provideSSRWidth(1024, nuxtApp.vueApp);
});

Nuxt configuration (nuxt.config.ts):

export default defineNuxtConfig({
  // ...
  modules: ["shadcn-nuxt"],
  shadcn: {
    /**
     * Prefix for all the imported components
     */
    prefix: "",
    /**
     * Directory that the components live in
     * @default "./app/components/ui"
     */
    componentDir: "./app/components/ui",
  },
});

Update your tsconfig.json:

{
  "files": [],
  "references": [
    { "path": "./.nuxt/tsconfig.app.json" },
    { "path": "./.nuxt/tsconfig.server.json" },
    { "path": "./.nuxt/tsconfig.shared.json" },
    { "path": "./.nuxt/tsconfig.node.json" }
  ],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "~/*": ["./app/*"],
      "@/*": ["./app/*"],
      "~~/*": ["./*"],
      "@@/*": ["./*"]
    }
  }
}

Run:

npx nuxi prepare

Then:

npx shadcn-vue@latest init

Example: Adding a button component

npx shadcn-vue@latest add button

Button usage example:

<template>
  <div class="p-4">
    <Button variant="primary">Click Me</Button>
  </div>
</template>

<script setup>
import { Button } from "@shadcn/ui";
</script>

---

4. Finalizing and Running the Application

Once Tailwind CSS and ShadCN are installed, you can start adding components as needed.
To run your application:

npm run dev

Then open http://localhost:3000 in your browser.

---

✅ You now have a fully working Nuxt.js project with ShadCN integration ready to use!