Lewati ke konten utama
TANGGAL RILIS01-02-2025
WAKTU BACA2 Menit
KATEGORIWeb App

Nuxt PDF Kit

Modul penampil PDF untuk Nuxt berbasis Nuxt UI dan Tailwind CSS v4, dilengkapi pencarian kata kunci, zoom, rotasi, cetak, dan navigasi dokumen yang ringan.

#Nuxt #PDF #OpenSource #Module
Nuxt PDF Kit

Masalah & Kebutuhan Developer

Menampilkan dokumen PDF secara interaktif di aplikasi web Nuxt kerap memicu kendala performa. Pustaka PDF yang ada biasanya berukuran bundel besar, sulit disesuaikan tampilannya, atau belum mendukung fitur SSR dan tema gelap bawaan Nuxt 3/4.

Nuxt PDF Kit dikembangkan untuk menjawab kendala tersebut: menghadirkan komponen penampil PDF yang siap pakai, ringan, dan menyatu rapi dengan sistem desain Nuxt UI.

Desain & Fitur Teknis

Modul ini dirancang dengan prinsip modularitas tinggi:

  • Arsitektur Composable: Menyediakan composable usePdfViewer untuk mengontrol status halaman, zoom, dan pencarian dokumen secara terprogram.
  • Dukungan Dark Mode Otomatis: Menyesuaikan warna kanvas dokumen dan bilah alat dengan tema warna sistem pengguna.
  • Integrasi Nuxt UI & Tailwind v4: Seluruh tombol kontrol memanfaatkan komponen primitif Nuxt UI demi menjaga aksesibilitas dan kemudahan kustomisasi.

Modul ini menggunakan teknik render canvas yang hanya memproses halaman aktif di viewport, sehingga konsumsi memori browser tetap hemat.

Fitur Utama

  • Bilah Alat Lengkap: Navigasi halaman, kontrol rasio zoom, rotasi dokumen 90°, cetak langsung (native print), dan unduh file.
  • Pencarian Teks dalam Dokumen: Pencarian kata kunci dengan penanda sorot (text highlighting) antar halaman.
  • Mode Tampilan Ganda: Pilihan mode tampilan halaman tunggal (single page) atau gulir bersambung (continuous scroll).