Preview Drafts

Previews enable you to see what drafted content will look like without publishing it. On this page, we’ll show you how to set up previews in your Vue project.

By the end of this page, you will be able to preview unpublished content.

Add previews in your repository

In your repository, navigate to Settings > Previews. Under “Create a New Preview,” enter:

• Site Name: A display name for the preview environment (such as “Development” or “Production”).
• Domain URL: The domain of your site (such as https://your-site.com or http://localhost:3000).
• Preview Route: This is a route in your app that Prismic will use to build your website’s URLs. By default, apps built with the @prismicio/vue package will use /preview.

Add the Prismic Toolbar Script

In Settings > Previews, you will find a script like this:

<script
  async
  defer
  src="https://static.cdn.prismic.io/prismic.js?new=true&repo=your-repo-name"
></script>
<!-- This example script will not work unless you change the repository name. -->

Include this script in your website header.

In order to ensure that previews and shareable preview links work properly, you must include this script on every page of your website, including 404 pages.

Preview a document

You can preview changes to documents after saving them, by clicking on the eye icon in the top-right corner of the editor. Prismic will set a preview cookie on your computer, and the @prismicio/vue plugin will include data from that cookie in requests to the Prismic API to allow access to content drafts.

Next Steps

By now, you should have:

• set up your Prismic Vue app,
• queried the API,
• templated Prismic content,
• deployed your app,
• and added previews.

If that’s the case, you’ve completed the fundamental steps to set up a Vue app with Prismic.

Now we’ll dive into advanced querying and templating.