Preview Drafts

On this page, you’ll learn how to preview drafts of your content.

Previews

One of the most powerful features of Prismic is Previews, which gives content editors the ability to preview content without publishing it to a live site. The Toolbar also allows you to edit your pages. On your website, click the eye button, select the part of the page you want to edit, and you’ll be redirected to the appropriate page in the Writing Room.

Trigger a Preview

To view a preview of your content changes, click ‘Save’ and then click the ‘eye’ icon. This will either open the preview or ask you to pick one of your preview environments. Read about setting up previews below.

Releases

Releases are a powerful feature that allows you to group document changes so that they are edited and published simultaneously.

Learn about releases

Setting up Previews in your Repository

Almost everything is configured for you, thanks to the @nuxt/prismic module. You’ll need to configure previews in your repo. You need to add the preview configuration inside your repository to enable preview. Here are the following steps:

• Go to your repository, navigate to Settings > Previews and add the configuration for a preview.
• Enter the preview Site Name, Domain, and Preview Route and click on the create my preview button. We recommend making the Preview route /preview.
• You can add as many preview URL’s as you need. This allows you to have a production server, staging server, development server, etc. Discover how to handle multiple environments in Prismic.

Preview Process Example Video:

Configure a custom route in your nuxt.config.js

If you add the preview route as /preview, you need only to set up the preview environment inside your repository, as described in the above step. You don’t need to add any configuration and preview toolbar in the nuxt.config.js file. It’s a built-in feature included in the @nuxt/prismic library.

If you’re using a different preview route, like ‘/my-preview,’ you’ll need to configure the preview with the Prismic property in the nuxt.config.js file. You can provide another path to the preview key like this:

prismic: {
  preview: '/my-preview'
}

If you want to disable previews on your website, you can set the preview key of the module options to false. The module won’t inject Prismic preview script anymore, and the /preview page won’t be registered.

prismic: {
  preview: false
}

Share a preview link

When you click on the “Preview” button on your document page, a new tab will open a preview page. Once you’re on a preview page, you can click on the bottom left button and copy the shareable link and share it with your team. Your team members don’t need to have a Prismic account to see the previews.

Customize the Preview Page (optional)

If you want to have a custom preview page, create a preview.vue file at ~/app/prismic/pages/preview.vue. Here’s the minimum scaffolding necessary:

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

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