Preview Drafts
On this page, you'll learn how to preview drafts of your content.
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.
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 are a powerful feature that allows you to group document changes so that they are edited and published simultaneously.
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.
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
}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.
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>Was this article helpful?
Can't find what you're looking for? Spot an error in the documentation? Get in touch with us on our Community Forum or using the feedback form above.