Halaman Rute /about

Showcase Seluruh Library & Package

Semua fitur di bawah ini dijalankan langsung oleh library package yang telah terpasang di template Nuxt ini.

Swiper Carousel

Carousel responsif dengan navigasi, pagination, dan aksesibilitas.

swiper/vue

SSR siap pakai

Render HTML di server untuk konten awal yang cepat dan mudah diindeks.

CSR fleksibel

Gunakan interaksi sisi client saat halaman atau komponennya membutuhkannya.

Swiper responsif

Atur jumlah slide per tampilan dan navigasi yang nyaman untuk layar kecil.

TypeScript

Integrasikan komponen carousel dengan aplikasi Nuxt berbasis TypeScript.

1. Tailwind CSS & Format Warna Bootstrap

Palet warna terintegrasi di tailwind.config.ts

Tailwind + Bootstrap Palette

primary#0d6efd

sec-white#f8f9fa

sec-black#212529

secondary#6c757d

warning#ffc107

danger#dc3545

info#0dcaf0

success#198754

Helper cn() (clsx + tailwind-merge):

Menggabungkan class dinamis tanpa konflik CSS.

2. Headless UI (@headlessui/vue)

Komponen UI interaktif, accessible, dan unstyled

@headlessui/vue

Headless UI Switch

Status Notifikasi:

Nilai switch: Nonaktif (False)

Headless UI Menu (Dropdown)

Accessible dropdown dengan keyboard focus navigation.

Headless UI Modal (Dialog)

Modal dialog ramah pembaca layar (ARIA focus trap).

3. VueUse Utilities (@vueuse/core) & Nuxt Icon

Komposisi reaktif peramban browser & ribuan icon

@vueuse/nuxt · @nuxt/icon

useMouse

X: 0 px · Y: 0 px

Posisi kursor real-time

useOnline

Tersambung (Online)

Status konektivitas browser

useClipboard

Akses API Clipboard

useLocalStorage

Tersimpan otomatis di browser

Dukungan Multi Icon Set (Nuxt Icon):

Heroicons Lucide Phosphor Carbon

4. Pinia State Management (@pinia/nuxt)

State terpusat reaktif yang tersinkronisasi antar-halaman

app/stores/app.ts

Nilai Counter Store

Getter Double Counter: 0

Nilai counter ini akan tetap sinkron ketika kamu berpindah kembali ke halaman Beranda (/) karena tersimpan di store global Pinia.

Nama App: Dian Adi Nugroho

5. SweetAlert2 (sweetalert2)

CSR Plugin Safe

SweetAlert2 dikonfigurasi melalui plugin client-only sehingga 100% aman dan tidak menyebabkan error SSR.

6. Day.js (dayjs)

Locale Indonesia

Waktu Sekarang:Monday, 12 October 2026 - 09:43:08

Relative Time (fromNow):4 hours ago

3 Hari ke Depan:15/10/2026 (Thursday)

7. Zod Form Validation (zod)

Validasi skema TypeScript yang aman dan deklaratif

zod safeParse

8. Axios Client (axios)

Instance Axios plugin dengan interceptor request/response

$api / useNuxtApp()

Uji pemanggilan API eksternal via instance Axios yang terdaftar secara otomatis di Nuxt: