Pengenalan

nuxt-tina adalah module Nuxt yang mengintegrasikan TinaCMS ke aplikasi Nuxt. Content editor bisa edit konten langsung di halaman yang sedang ditampilkan. Sidebar Tina muncul di sampingnya, dan halaman berubah live saat mereka ngetik, tanpa reload.

Konten tetap tersimpan di Git (Markdown, MDX, atau JSON). Tina cuma jadi antarmuka buat ngeditnya.

Masalah yang diselesaikan

TinaCMS belum punya integrasi resmi buat Vue atau Nuxt. Bridge visual editing yang sudah dimiliki Tina (arsitektur iframe + postMessage) belum pernah diimplementasikan secara resmi untuk Vue.

nuxt-tina mengimplementasikan bridge itu:

1. Tina Admin jalan di /admin.
2. Halaman Nuxt dimuat di dalam <iframe> di samping form editor.
3. Setiap perubahan form dikirim ke halaman lewat window.postMessage.
4. Composable useTina() menerima payload itu dan memperbarui state Vue secara reaktif.

Mode editing

Module ini menyediakan dua mode editing yang independen:

CMS dasar (/admin#/collections/): form edit bawaan Tina, langsung baca/tulis file. Tidak butuh bridge, selalu stabil.

Visual editing (/admin#/~/path): live preview dua arah lewat iframe. Editor lihat halaman aslinya sambil ngedit. Ini alasan utama kenapa module ini dibuat.

Kalau visual editing kerasa belum stabil di project kamu, mode CMS dasar tetap jalan buat semua operasi editing.

Yang otomatis terdaftar

Setelah module dipasang, berikut ini langsung tersedia tanpa konfigurasi tambahan:

• Composable: useTina(), useTinaBridge(), useTinaPreview()
• Komponen: <TinaProvider>, <TinaMarkdown>, <TinaMermaid>
• tina/config.ts starter, dibuat otomatis saat pertama kali dijalankan kalau belum ada
• TypeScript types buat semua opsi

Lanjut ke Instalasi buat mulai.