Set up Prismic

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

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:

Create 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 install @prismicio/vue@^2 @prismicio/client@^5 prismic-dom@^2

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.

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.