usePreviewMode

You can use the built-in usePreviewMode composable to access and control preview state in Nuxt. If the composable detects preview mode it will automatically force any updates necessary for useAsyncData and useFetch to rerender preview content.

const { enabled, state } = usePreviewMode()

Options

Custom enable check

You can specify a custom way to enable preview mode. By default the usePreviewMode composable will enable preview mode if there is a preview param in url that is equal to true (for example, http://localhost:3000?preview=true). You can wrap the usePreviewMode into custom composable, to keep options consistent across usages and prevent any errors.

export function useMyPreviewMode () {
  return usePreviewMode({
    shouldEnable: () => {
      return !!route.query.customPreview
    }
  });
}

Modify default state

usePreviewMode will try to store the value of a token param from url in state. You can modify this state and it will be available for all usePreviewMode calls.

const data1 = ref('data1')

const { enabled, state } = usePreviewMode({
  getState: (currentState) => {
    return { data1, data2: 'data2' }
  }
})

Example

<script setup>
const route = useRoute()

const { enabled, state } = usePreviewMode({
  shouldEnable: () => {
    return route.query.customPreview === 'true'
  },
})

const { data } = await useFetch('/api/preview', {
  query: {
    apiKey: state.token
  }
})
</script>

<template>
  <div>
    Some base content

    <p v-if="enabled">
      Only preview content: {{ state.token }}

      <br>

      <button @click="enabled = false">
        disable preview mode
      </button>
    </p>
  </div>
</template>