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 repo

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).
  • Link Resolver (optional): 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, which is the default setting.

Multiple previews

Note that you can add multiple previews in your repo settings. For instance, you can have one preview for your website on localhost and another for your production website.

Add the Prismic Toolbar Script

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

Copy
<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 repo 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.


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.