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.
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.
In your terminal, navigate to the root level of your Vue project. Then, install these three dependencies:
- npm
- Yarn
npm install @prismicio/vue@^2 @prismicio/client@^5 prismic-dom@^2yarn add @prismicio/vue@^2 @prismicio/client@^5 prismic-dom@^2Further 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.
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.
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')
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?
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.