Vite

Memasang dan mengonfigurasi Kliping di project Vite.

Buat project

Mulai dengan membuat project Vue baru memakai vite:

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

Pasang Tailwind CSS

npm install 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

Resolve

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

npm install -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'),
    },
  },
})

Vite Tsconfig Paths

Pakai vite-tsconfig-paths untuk menyelesaikan import lewat path mapping milik TypeScript.

npm install -D vite-tsconfig-paths

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import tailwindcss from '@tailwindcss/vite'
import tsconfigPaths from 'vite-tsconfig-paths'

export default defineConfig({
  plugins: [vue(), tailwindcss(), tsconfigPaths()],
})

Jalankan CLI

Jalankan perintah init untuk menyiapkan project Anda:

npx 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.

npx 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>