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.
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.
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:
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';
};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
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.
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.
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.
prismic: {
// you can provide your link resolver function directly
linkResolver: function(doc) {
return '/'
}
}Was this article helpful?
Can't find what you're looking for? Get in touch with us on our Community Forum.