Set up Prismic

This technology has no Slice Machine integration

This framework has no integration with Prismic's developer tool, Slice Machine. You can still build a Prismic website with this technology by using Prismic's Legacy Builder. However, if you're starting a new project with Prismic, we strongly recommend using a technology that integrates with Slice Machine: Next.js or Nuxt.

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


Prerequisites

Before you get started, you'll need a Vue 2 project initialized and a basic understanding of Vue.

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

Install dependencies

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. @prismicio/vue bundles those packages together and injects them into your Vue app along with a few special components.

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.

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.

~/src/main.js
Copy
import Vue from 'vue'
import App from './App'
import PrismicVue from '@prismicio/vue'

// Use your repository name
const endpoint = 'https://your-repo-name.cdn.prismic.io/api/v2'

// Define your site structure with a route resolver
const routes = [
  {
    type: 'page',
    path: '/:uid',
  },
  {
    type: 'page',
    uid: 'homepage',
    path: '/'
  }
]

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

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