Preview Content Changes

This article will show you how to preview content changes without publishing your document or rebuilding your project.


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. In your website, just click the button, select the part of the page that they 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, simply click 'Save' and the 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 allow you to group document changes together so that they are edited and published at the same time.

Learn about Releases

Setting up Previews in your Repository

Thanks to the @nuxt/prismic module almost everything is configured for you, you'll just need to configure previews in your repo. In order to enable preview, you just need to add the preview configuration inside your repository. Here are the following steps:

  1. Go to your repository, navigate to Settings > Previews and add the configuration for a preview.
  2. Enter the preview Site Name, Domain, and Link Resolver route and click on the create my preview button. We recommend adding the Link Resolver route as /preview, by default.
  3. 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 to only 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:

Copy
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 anymore Prismic preview script and the /preview page won't be registered.

Copy
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:

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

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

Related Articles


Was this article helpful?
Not really
Yes, Thanks

Can't find what you're looking for? Get in touch with us on our Community Forum.