Link Resolving

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.

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:

Copy
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';
};

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 prismic-vue plugin. In the Prismic Vue.js starter this is done in src/main.js

Copy
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:

doc.id

string

The document ID

doc.uid

string

The user-friendly unique identifier

doc.type

string

The custom type of the document

doc.tags

array

Array of the document tags

doc.lang

string

The language code of the document

doc.isBroken

boolean

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.