Preview Mode

nuxt-tina punya dua mekanisme "preview" yang beda tujuan. Jangan disamakan:

1. Contextual editing (udah jalan, bukan usePreviewMode())

Live editing di dalam iframe Tina Admin (/admin#/~/...) di-patch lewat bridge postMessage custom (useTina() + bridge.ts), bukan usePreviewMode() bawaan Nuxt. Begitu editor ngetik di form Tina, data barunya langsung dikirim ke halaman lewat postMessage dan di-patch ke state Vue reaktif: sama sekali nggak ada refetch ke server.

const { data, isEditing, isInIframe } = useTina(response)

2. useTinaPreview(): link preview yang bisa dibagikan

Composable terpisah buat kasus yang beda: bagi link draft ke stakeholder yang nggak pernah buka Tina Admin sama sekali. Ini cuma wrapper tipis di atas usePreviewMode() bawaan Nuxt.

const { enabled, state } = useTinaPreview()
// state.branch otomatis keisi dari query param ?tina-preview=<branch>

• Aktif lewat query param ?tina-preview=<branch> (nama param-nya bisa diubah: useTinaPreview('custom-param')).
• state.branch otomatis keisi, dan useAsyncData/useFetch yang udah ada otomatis re-run pas status preview berubah (udah built-in di usePreviewMode(), nggak perlu logic manual).
• Ditest pakai nuxt generate + nuxt preview, bukan nuxt dev.

Composable-nya sendiri udah jalan (plumbing sisi Nuxt-nya udah selesai). Yang belum disambungkan itu protokol token Tina Cloud Editorial Workflow yang beneran (fitur PRO berbayar), soalnya butuh akun PRO buat verifikasi gimana token itu sebenarnya dipetakan ke branch/draft di sisi Tina Cloud. Kalau kamu cuma butuh live editing di dalam Tina Admin, kamu nggak butuh useTinaPreview() sama sekali: itu murni buat kasus "kirim link ke orang lain".