<!-- pages/[...slug].vue -->
<script setup>
const { enabled, state } = usePreviewMode()
</script>

<template>
  <div>
    <div v-if="enabled" class="preview-banner">
      Preview mode is active
    </div>
    <ContentRenderer :value="page" />
  </div>
</template>

// Activate by visiting: /my-page?preview=true&token=my-secret

// You can also customize the enable check:
const { enabled, state } = usePreviewMode({
  shouldEnable: () => {
    return route.query.preview === 'true'
      && route.query.token === 'my-secret'
  },
  getState: (currentState) => {
    return { token: route.query.token, ...currentState }
  },
})