Preview Drafts

This technology has no Slice Machine integration

This framework has no integration with Prismic's developer tool, Slice Machine. You can still build a Prismic website with this technology by using Prismic's Legacy Builder. However, if you're starting a new project with Prismic, we strongly recommend using a technology that integrates with Slice Machine: Next.js or Nuxt.

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.

Multiple previews

Note that you can add multiple previews in your repository 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 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.

← Previous

Deploy

Create a SliceZone

Can't find what you're looking for?

Need technical Support? Spot an error in the documentation? Get in touch with us on our Community Forum.