Setup

By the end of this page, you will have a Prismic repo connected to your Vue project.


Prerequisites

Before you get started, you will need a package manager like npm or Yarn installed globally. You'll also need a Vue project initiated. If you don't have those, here are some guides we recommend:

Create a repo in Prismic

This is where you will create and manage your content. If you don't already have one, create a repo:

Create Repo

Then, add some content to your repo, so that you have something to template in your Vue project.

Need some tips on how to get started with your repo? Check out our guides to creating content:

Installation

In your terminal, navigate to the root level of your Vue project. Then, install these three dependencies:

  • NPM
  • Yarn
Copy
npm install @prismicio/vue @prismicio/client prismic-dom
Copy
yarn add @prismicio/vue @prismicio/client prismic-dom

Further Learning: What do these dependencies do?

prismic-dom provides some utilities for rendering HTML. @prismicio/client helps with querying the Prismic API. And @prismicio/vue bundles those packages together and injects them into your Vue app.

Create a Link Resolver

Your Link Resolver will take care of internal link routing with Prismic. Below is a basic example of a Link Resolver, but you will need to customize it for your site structure.

Create a file ~/src/link-resolver.js, and paste in this code:

Copy
// The Link Resolver takes a Prismic document as its argument
export default function(doc) {
  // Then it executes a switch to determine how to treat the item
  if (doc.type === "homepage") {
    // If you have a singleton 'homepage' document, you return the root
    return "/";
  }
  if (doc.type === "post") {
    // For a 'post', you could use the post's Unique ID (UID)
    return "/blog/" + doc.uid;
  }
  // For other document types, just use the UID
  if (doc.uid) {
    return "/" + doc.uid;
  }
  // Otherwise, return a 404
  return "/404";
}

Further Learning: What is a Link Resolver?

A Link Resolver tells Vue how to structure relative URLs for your content. If, for instance, you have a link to a blog post, your Link Resolver might dictate that all documents of "type" "blog post" should have the URL path "/blog/" + document.id.

Register @prismicio/vue in Vue

To use @prismicio/vue, you must register it in your app entry point, which is most likely ~/src/main.js.

The access token and API options are only necessary if your repo is set to private.

Copy
// `~/src/main.js`

import Vue from 'vue'
import App from './App'
import PrismicVue from '@prismicio/vue'
import linkResolver from './link-resolver' // Update this path if necessary

const accessToken = '' // Leave empty if your repo is public
const endpoint = 'https://your-repo-name.cdn.prismic.io/api/v2' // Use your repo name

// Register plugin
Vue.use(PrismicVue, {
  endpoint,
  apiOptions: { accessToken },
  linkResolver
})

// Create a Vue instance
new Vue({
  render: (h) => h(App)
}).$mount('#app')

Next Steps

You can't see it, yet, but the @prismicio/vue package is now integrated in your project.

On the next page, we'll start querying content from the API.