Install Prismic

By the end of this page, you will have a Prismic repository 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:

Using Vue 3

These instructions are for Vue 2. Nonetheless, at Prismic we're excited about Vue 3. We have already started supporting it with our new Vue 3 kit, which has been released in alpha. To start building with Prismic and Vue 3, check out the documentation for the new alpha kit.

Create a repository in Prismic

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

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

Need some tips on how to get started with your repository? 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
npm
Copy
npm install @prismicio/vue@^2 @prismicio/client@^5 prismic-dom@^2
Yarn
Copy
yarn add @prismicio/vue@^2 @prismicio/client@^5 prismic-dom@^2

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.

Dependency versions

@prismicio/vue depends on @prismicio/client v5 and prismic-dom. The latest version of @prismicio/client and prismic-dom's replacement, @prismicio/helpers v2, are not currently compatible with @prismicio/vue but can be used alongside.

This guide will be updated when @prismicio/vue is updated to support the latest packages.

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 repository 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 repository is public
const endpoint = 'https://your-repo-name.cdn.prismic.io/api/v2' // Use your repository 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.


Was this article helpful?
Not really
Yes, Thanks

Can't find what you're looking for? Spot an error in the documentation? Get in touch with us on our Community Forum or using the feedback form above.