shadcn-vue

クイックスタート (3分)

Vue プロジェクト用 (Vite)

1. shadcn-vue を初期化

npx shadcn-vue@latest init

初期化中:

• スタイル: New York または Default (後で変更できません!)
• ベースカラー: Slate (推奨)
• CSS変数: Yes (ダークモードに必須)

2. TypeScript パスエイリアスを設定

// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

3. Vite を設定

// vite.config.ts
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import tailwindcss from "@tailwindcss/vite"; // Tailwind v4
import path from "path"

...