Preview Mode

nuxt-tina has two different "preview" mechanisms with different purposes. Don't confuse them:

1. Contextual editing (already working, not usePreviewMode())

Live editing inside the Tina Admin iframe (/admin#/~/...) is patched through a custom postMessage bridge (useTina() + bridge.ts), not Nuxt's usePreviewMode(). As the editor types in the Tina form, the new data is sent straight to the page via postMessage and patched into reactive Vue state: no server refetch at all.

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

2. useTinaPreview(): shareable preview link

A separate composable for a different case: sharing a draft link with a stakeholder who never opens Tina Admin at all. It's a thin wrapper over Nuxt's own usePreviewMode().

const { enabled, state } = useTinaPreview()
// state.branch is filled automatically from the ?tina-preview=<branch> query param

• Enabled through the ?tina-preview=<branch> query param (the param name is configurable: useTinaPreview('custom-param')).
• state.branch is filled automatically, and any existing useAsyncData/useFetch re-runs automatically when preview status changes (built into usePreviewMode(), no manual logic needed).
• Tested with nuxt generate + nuxt preview, not nuxt dev.

The composable itself works (the Nuxt-side plumbing is done). What's not wired up is the real Tina Cloud Editorial Workflow token protocol (a paid PRO feature), since that needs a PRO account to verify how the token actually maps to a branch/draft on Tina Cloud's side. If you only need live editing inside Tina Admin, you don't need useTinaPreview() at all: it's purely for the "send a link to someone else" case.