Link / Content Relationship Templating with Vue.js

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 prismic-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.

Usage

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.

Copy
<template>
  <div>
    <prismic-link :field="fields.myLink">
      Click here
    </prismic-link>
  </div>
</template>

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

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.

To learn more about the Link field check out the user guide.