Previews

One of the most powerful features of Prismic is the ability to preview content before it goes live. Setting up the preview functionality can be tricky but this module does it for you out of the box, all that's left for you to do is to configure a preview environment inside your Prismic repository.

How Does It Do That?

To enable previews on your website the module has to inject the Prismic preview script at the end of the body tag of the page. It also registers a new /preview route in the Nuxt.js application which is used to resolve your preview sessions.

Changing the Preview Route

You can configure the preview route by providing another path to the preview key of the module options:

prismic: {
  endpoint: '...',
  preview: '/my-preview'
}

Disabling Previews

This module comes with previews enabled by default, if you want to disable previews on your website you can set the preview key of the module options to false:

prismic: {
  endpoint: '...',
  preview: false
}

The module won't inject anymore Prismic preview script and the /preview page won't be registered.

Preview Reload Type

Since 1.4.0 the module performs preview reloads using Nuxt refresh() method, effectively hot reloading instead of hard reloading the page. You can set the previewReloadType key of the module options to hard to perform hard reloads instead:

prismic: {
  endpoint: '...',
  previewReloadType: 'hard'
}

Customizing the Preview Page

If you want to go fancy and provide a custom preview page, you can do so by creating it at ~/app/prismic/pages/preview.vue. Here's its minimum scaffolding:

<template>
  <p>Loading Prismic preview...</p>
</template>

<script>
export default {
  mounted() {
    this.$prismic.preview()
  }
}
</script>