Templating Link & Content Relationship fields

The Link field is used for adding links to the Web, to Prismic's Documents from your repository, or to files from the media library of your Prismic repository. The Content Relationship field is a Link field specifically used to add links to a Prismic's Document.

Before Reading

This page assumes that you have already included the @prismicio/vue plugin in your project or that you are using the Prismic Vue.js starter. Check out the Integrating with existing project page to learn how to get setup.


Here's an example of how to integrate a Link or Content Relationship field into your template. This will work for any kind of link: link to the Web, link to a Prismic's Document, or link to a media item from your repository.
In this example, the Link field has the API ID of my_link.

    <prismic-link :field="fields.myLink">
      Click here

export default {
  data () {
    return {
      fields: {
        myLink: null
  methods: {
    // This is an example query, the important part is above.
    getContent () {
        .then((document) => {
          this.fields.myLink = document.data.my_link;
  created () {

Link Resolving for a Link to a Document / Content Relationship

When working with a Link to a Document / Content Relationship, 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.

To learn more about this, check out the Link Resolving documentation page.