All Technologies / Nuxt.js / Create Simple URLs

Create Simple URLs (Link Resolver)

By the end of this article you will learn how to create simple URLs for links to your Prismic documents using the 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.

Route Resolver vs Link Resolver?

You may be asking what the difference between this new Route Resolver and the existing Link Resolver?

Good question. The most obvious difference is that the Route Resolver gets its information server side which makes it possible to create nested routes to the Grandparent level.

While the Link Resolver is limited to client side singular document data, so you can only create routes with Parent data.

Which Resolver takes priority?

Your project should first try to find the route for the current document in the Link Resolver. If it returns null for that document then it calls the Route Resolver which is defined in the apiOptions as shown below.

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

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

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, Luckily the @nuxt/prismic module makes this easy. Any one of the options below will work.

Options for where to add the link resolver:

1. You can add a link-resolver.js file in the directory structure ~/app/prismic/link-resolver.js, the @nuxt/prismic module will detect this automatically and use it in your project.
2. You can also link to the link-resolver.js file in your nuxt.config.js file.

Copy
  prismic: {
    endpoint: 'https://my-repo-name.cdn.prismic.io/api/v2',
    linkResolver: '@/plugins/link-resolver',
    htmlSerializer: '@/plugins/html-serializer',
  },

3. Or you can add the link resolver function in the @nuxt/prismic module of your your nuxt.config.js file.

Copy
prismic: {
  // you can provide your link resolver function directly
  linkResolver: function(doc) {
    return '/'
  }
}

Related Articles

Create complex nested URLs

Learn how to create complex nested URLs with the Route Resolver.

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.