Link Resolver

Your Link fields and Rich Text fields may contain a link that points to a Document in your Prismic repository. To make this link work properly within your website, you need to have a Link Resolver function that returns the appropriate path within your website. This Link Resolver function will take a Prismic Document object as an argument and return the corresponding route path of your website.

Define the Link Resolver function

Since routing is specific to your website, you need to explicitly define your internal routing in the Link Resolver function. You simply have to create that function somewhere in your project, for example you can create a file named link-resolver.js that will export the function.

A Link Resolver is already provided in the Prismic Vue.js starter (located at src/prismic/link-resolver.js). You will need to adapt it depending on your routing.

Here's what it looks like:

export default function (doc) {
  if (doc.isBroken) {
    return '/not-found';

  if (doc.type === 'home') {
    return '/';

  if (doc.type === 'page') {
    return '/page/' + doc.uid;

  return '/not-found';

Use the Link Resolver in your project

To make sure that your Link Resolver function is used by the <prismic-link> and <prismic-rich-text/> components in your project, you need to set the Link Resolver function as the linkResolver option when stating the usage of the @prismicio/vue plugin. In the Prismic Vue.js starter this is done in src/main.js

import Vue from 'vue';
import PrismicVue from 'prismic-vue';
import linkResolver from 'path/to/the/link-resolver';

// ...

Vue.use(PrismicVue, {
  endpoint: window.prismic.endpoint,
  linkResolver: linkResolver

// ...

Accessible properties

The Link Resolver function should pass a Prismic Document object as a parameter. Inside the function you will have access to the following properties:


The document ID



The user-friendly unique identifier



The custom type of the document



Array of the document tags



The language code of the document



Boolean that states if the link is broken or not

Vue Router: Reacting to params changes

If your component is retrieving content from the Prismic API based on one of the route params, make sure to take a look at our Reacting to params changes page.