Links & Content RelationshipsBeta

On this page, you will learn how to work with Links and Content Relationships from Prismic in your Nuxt project.


🚧 Content Relationships not currently available in the Slice Builder

At present, Content Relationship fields are not available in the Slice Builder. This feature is currently in development.

You can still use Content Relationships by editing the Custom Type in the Prismic Custom Type editor. There, you can use Content Relationships outside the Slice Zone and in Slices that you create in the editor.

API Response

Prismic's Link field allows you to link to an external webpage, an internal Prismic document, or an item in your media library (like a PDF). The Content Relationship field allows you to link specifically to an internal Prismic document.

Here's what a Content Relationship Field looks like from the API (a Link takes a similar format):

Copy
example_content_relationship: {
  id: "X9C65hEAAEFIAuLo",
  type: "page",
  tags: [],
  slug: "another-document",
  lang: "en-us",
  uid: "another-document",
  link_type: "Document",
  isBroken: false
},

Use Cases

There are two things that you might want to do with a link:

  • Link to another page or media item, internally or externally
  • Pull in content from another document

Here's how to do those two things:

Link to Another Page

Internal linking always requires a Link Resolver or Route Resolver.

ℹī¸ What is Link and Route Resolving?

In simple terms, Prismic does not know the structure of your Vue app. So, you need a Link Resolver or Route Resolver to determine the path of internal links. To learn more about how they work, see our page on generating URLs.

By default, your Nuxt project will use the Link Resolver that you added in your setup to resolve links. However, when templating Links and Content Relationships, you can also pass a custom link resolver.

Here is how to create a link with the link component:

Copy
<prismic-link :field="document.data.example_link">Example Link</prismic-link>

Here is how to create a link with the link helper function:

Copy
<NuxtLink :to="$prismic.asLink(document.data.example_link)">Example Link</NuxtLink>

Pull Content from Another Document

To pull in content from another document, you can fetch that content in your API Query, using the graphQuery or fetchLinks option. You can learn how to use these options in the Vue documentation.

Once you have adjusted your API query, the linked content will appear in a "data" object nested in the Link or Content Relationship field:

Copy
"example_content_relationship": {
  "id": "X9C65hEAAEFIAuLo",
  "type": "page",
  "tags": [],
  "slug": "another-page-title",
  "lang": "en-us",
  "uid": "page-2",
  "data": {
    "example_key_text": "Another Page Key Text"
  },
  "link_type": "Document",
  "isBroken": false
},

You can then template that content as usual:

Copy
<span>{{ document.data.example_content_relationship.data.example_key_text }}</span>

Related Articles