Api
useTinaPreview()
API reference for the useTinaPreview() composable.
A shareable preview link, different from useTina(). See Preview Mode for the full explanation of when to use which.
Type signature
function useTinaPreview(paramName?: string): {
enabled: Ref<boolean>
state: Ref<{ branch?: string }>
}
| Parameter | Default | Description |
|---|---|---|
paramName | 'tina-preview' | The query param name that enables preview mode |
Return value
Exactly what Nuxt's own usePreviewMode() returns: { enabled, state }. state.branch is filled automatically from the query param's value.
Example
<script setup lang="ts">
const { enabled, state } = useTinaPreview()
const { data } = await useAsyncData('page', () =>
$fetch('/api/tina/pages/home', {
query: { branch: state.value.branch },
}),
)
</script>
<template>
<div v-if="enabled" class="preview-banner">
Viewing a draft from branch: {{ state.branch }}
</div>
</template>
Visit the page with ?tina-preview=<branch-name> to enable this mode. Remember: test it with nuxt generate + nuxt preview, not nuxt dev, that's a limitation of usePreviewMode() itself, not specific to nuxt-tina.