Buat project

Mulai dengan membuat project Vue baru memakai vite:

pnpm create vite@latest my-vue-app --template vue-ts

Pasang Tailwind CSS

pnpm add tailwindcss @tailwindcss/vite

Ganti seluruh isi src/style.css dengan baris berikut:

@import "tailwindcss";

Sunting file tsconfig.json

Vite versi sekarang memecah konfigurasi TypeScript menjadi tiga file, dan dua di antaranya perlu Anda sunting. Tambahkan properti baseUrl dan paths ke bagian compilerOptions pada file tsconfig.json dan tsconfig.app.json:

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

Sunting file tsconfig.app.json

Tambahkan kode berikut ke tsconfig.app.json supaya path bisa diselesaikan dengan benar oleh IDE Anda:

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

Perbarui vite.config.ts

Tambahkan kode berikut ke vite.config.ts supaya aplikasi Anda bisa menyelesaikan path tanpa error:

pnpm add -D @types/node

import path from 'node:path'
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue(), tailwindcss()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
})

Jalankan CLI

Jalankan perintah init untuk menyiapkan project Anda:

pnpm dlx shadcn-vue@latest init

Anda akan ditanya beberapa hal untuk mengisi components.json.

Which color would you like to use as base color? › Neutral

Tambahkan komponen

Sekarang Anda bisa mulai menambahkan komponen ke project.

pnpm dlx shadcn-vue@latest add button

Perintah di atas menambahkan komponen Button ke project Anda. Setelah itu, import seperti ini:

<script setup lang="ts">
import { Button } from '@/components/ui/button'
</script>

<template>
  <div>
    <Button>Klik saya</Button>
  </div>
</template>