Buat project

Mulai dengan membuat project Nuxt baru:

pnpm create nuxt@latest

Kalau Anda menemui error ERROR: Cannot read properties of undefined (reading 'sys') (x4), pasang TypeScript sebagai dependency seperti disarankan pada issue ini.

pnpm add -D typescript

Pasang Tailwind CSS

Ada dua cara memasang Tailwind CSS di Nuxt. Pilih salah satu.

pnpm add tailwindcss @tailwindcss/vite -D

Ganti seluruh isi app/assets/css/tailwind.css dengan baris berikut:

@import "tailwindcss";

Perbarui nuxt.config.ts seperti ini:

import tailwindcss from '@tailwindcss/vite'

export default defineNuxtConfig({
  // ...
  css: ['~/assets/css/tailwind.css'],
  vite: {
    plugins: [
      tailwindcss(),
    ],
  },
})

Pasang module Nuxt

Kalau langkah ini dilewati, console Anda akan dipenuhi peringatan akibat fitur auto-import milik Nuxt.

Pasang paket berikut.

pnpm dlx nuxi@latest module add shadcn-nuxt

Atur nuxt.config.ts

export default defineNuxtConfig({
  // ...
  modules: ['shadcn-nuxt'],
  shadcn: {
    /**
     * Prefix for all the imported component.
     * @default "Ui"
     */
    prefix: '',
    /**
     * Directory that the component lives in.
     * Will respect the Nuxt aliases.
     * @link https://nuxt.com/docs/api/nuxt-config#alias
     * @default "@/components/ui"
     */
    componentDir: '@/components/ui'
  }
})

Tambahkan plugin ssrWidth (opsional)

Sebagian komponen perlu nilai ssrWidth yang diatur lewat VueUse, agar tidak terjadi error hydration di perangkat mobile.

Tambahkan plugin berikut ke aplikasi Nuxt Anda di app/plugins/ssr-width.ts.

Penjelasan lebih lanjut ada di useSSRWidth.

import { provideSSRWidth } from '@vueuse/core'

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

Jalankan Nuxt Prepare

Kalau ini project baru, jalankan perintah berikut supaya Nuxt menghasilkan folder .nuxt yang dibutuhkan:

pnpm dlx nuxi prepare

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. Fitur auto-import Nuxt yang akan mengurus import-nya, jadi Anda bisa langsung memakainya:

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