In-Website Preview

When working in the writing room, content writers can preview their new content on their website without having to publish it.

Before Reading

This page assumes that you have already included the prismic-vue plugin and are using Vue Router in your project, or that you are working with the Prismic Vue.js starter. Check out the Integrating with existing project page to learn how to get setup.

1. Include the Prismic Toolbar javascript file

First you need to include the following scripts on every page of your website, just before the closing </head>. Make sure to update <your-repo-name> with the name of the endpoint for your repository.

Copy
<script>
  window.prismic = {
    endpoint: 'https://<your-repo-name>.prismic.io/api/v2'
  };
</script>
<script src="https://static.cdn.prismic.io/prismic.min.js"></script>

Note for Sharable Previews & unpublished previews

To guarantee that Sharable Previews and unpublished document previews work properly you must ensure that these scripts are included on every page of your website, including your 404/Page Not Found page. Otherwise these previews might not work.

2. Setup a preview environment

In your repository, head to the Settings / Previews. Add a site name and the domain for your website where you wish to preview your content. You can also add an optional Link Resolver route which you will learn more about in the next section.

Note that you can also enter localhost domains such as:

Copy
http://localhost:8080

If you are using our official Prismic vue.js plugin (prismic-vue), then that is all you need to do to gain the basic functionality of the Preview feature! If you are not using this kit to make your queries, then refer to the "Use the correct ref" section below.

With the basic functionality of the Preview feature, when you click on the preview button, you will be taken to the homepage of your preview domain. From here you can navigate to the page you are trying to preview.

Next we will show you how to add a Link Resolver endpoint so that you will be taken directly to the page you are trying to preview.

In order to be taken directly to the page you are previewing instead of the homepage, you need to add a Link Resolver endpoint. A typical example of this would be:

Copy
http://example.com/preview

In your preview settings add this endpoint to the optional Link Resolver field.

If your Vue Router is in hash mode, the Link Resolver endpoint must contain the hash: /#/preview

Using the official Prismic Vue.js starter?

If you are using the official Prismic Vue.js starter, then you should already have all the code in place you need for in-website previews. That's as much as you need to do!

Now you need to add the Link Resolver endpoint route to your website router. In the Prismic Vue.js starter you will find this route in src/router.js.

Copy
// ...

import Preview from 'path/to/the/Preview.vue';

// ...

{
  path: '/preview',
  name: 'preview',
  component: Preview
},

// ...

You can see that when the "/preview" route is called, it will use the Preview component. Let's create this component now.

Add the Preview component

The Preview component must do the following:

  • Retrieve the preview token from the token parameter in the query string
  • Call the Prismic development kit with this token and the Link Resolver will retrieve the correct URL for the document being previewed
  • Redirect to the given URL

The Preview Token

Note that the preview token will be a URL. You DO NOT need to follow this url. All you need to do is pass this token into the previewSession method as shown below.

Here is an example of what the Preview component might look like.

Copy
<template>
  <div>
    <p>Loading the Prismic's Preview...</p>
  </div>
</template>

<script>
export default {
  name: 'Preview',
  beforeCreate () {
    const previewToken = this.$route.query.token;

    this.$prismic.client.previewSession(previewToken, this.$prismic.linkResolver, '/')
      .then((url) => {
        window.location.replace(url);
      })
  }
};
</script>

Note that the previewSession method requires you to input a Link Resolver function so that the preview endpoint knows where to redirect to. You can learn more about link resolving by checking out the Link Resolving page.

You either need to define the Link Resolver in the Preview component or import it.

You should already have the Link Resolving function in place if you have followed the Integrating with existing project page or are working with the Prismic Vue.js starter.

To learn more about how to preview a document, check out the user guide.