useTinaPreview()

Link preview yang bisa dibagikan, beda sama useTina(). Lihat Preview Mode buat penjelasan lengkap kapan pakai yang mana.

Type signature

function useTinaPreview(paramName?: string): {
  enabled: Ref<boolean>
  state: Ref<{ branch?: string }>
}

Return value

Persis sama kayak yang dibalikin usePreviewMode() bawaan Nuxt: { enabled, state }. state.branch otomatis keisi dari value query param-nya.

Contoh

<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">
    Lihat draft dari branch: {{ state.branch }}
  </div>
</template>

Akses halamannya dengan ?tina-preview=<nama-branch> buat ngaktifin mode ini. Ingat: test-nya pakai nuxt generate + nuxt preview, bukan nuxt dev, itu limitasi dari usePreviewMode() sendiri, bukan spesifik ke nuxt-tina.

• Source