Integrating Prismic with an existing project (ES Modules setup)

If you are already working on a project that use ES Modules, that's the case if your project is based on the Vue.js template for Webpack, then you can simply use our Vue.js plugin: prismic-vue. Let's walk through all the steps to get Prismic integrated into your project.

1. Create a Prismic repository

A Prismic repository is where you define, edit and publish content.

Create a new repository

Next you'll need to model your content, create some Custom Types and publish some documents in your repository. To learn more about this, check out our user guide about Content modeling and custom types.

Now, let's take a look at how to query content from Prismic and integrate it in a Vue component.

2. Add the prismic-vue plugin as dependency

Let's add the prismic-vue plugin as a dependency to your project. Launch the terminal (command prompt or similar on Windows), point it to your project location and run the following command:

Copy
npm install prismic-vue

3. Define your API endpoint and include the Prismic Toolbar script

Now we will add a global variable defining your Prismic repository API endpoint, and we will include the Prismic Toolbar script. Note that you have to define your API endpoint as a global variable before including the Prismic Toolbar script.

In the index.html file, just before the closing </head>, make sure to add the following code with your repository's name:

Copy
<script>
  window.prismic = {
    endpoint: 'https://your-repo-name.prismic.io/api/v2'
  };
</script>
<script src="https://static.cdn.prismic.io/prismic.min.js"></script>

Your content may contain links that need to point to a Prismic document. To make the link work properly within your website, you need to setup a Link Resolver function that returns the appropriate URL. This function takes a Prismic document object as an input and returns the corresponding route path of your website.

To learn more about this, check out the Link Resolving documentation page.

In the src folder of your project, create a file named link-resolver.js:

Copy
export default function (doc) {
  // Return the path depending on Prismic Document's type
  // If it is a Single Custom Type with the API ID of "home"
  if (doc.type === 'home') {
    return '/';
  }
  // If it is a Repeatable Custom Type with the API ID of "page" (must contain a UID field)
  if (doc.type === 'page') {
    return '/page/' + doc.uid;
  }

  // Default to the root
  return '/';
};

5. Use the prismic-vue plugin

Then you have to use the prismic-vue plugin in your Vue app. Two values are required in its options object argument: the API endpoint and the Link Resolver function.

Add this in the src/main.js file:

Copy
import Vue from 'vue';
import PrismicVue from 'prismic-vue';
import linkResolver from './link-resolver';

// Add this before the new Vue instance
Vue.use(PrismicVue, {
  endpoint: window.prismic.endpoint,
  linkResolver
});

If you are using a private repository, then you'll need to include your access token like this:

Copy
import Vue from 'vue';
import PrismicVue from 'prismic-vue';
import linkResolver from './link-resolver';

const accessToken = 'MC5XMDNQUFNFQUFDUUFjZm9L...v73vv73vv70f77-977-9Vi0';

Vue.use(PrismicVue, {
  endpoint: window.prismic.endpoint,
  linkResolver,
  apiOptions: { accessToken }
});

6. Query and integrate your content in a component

Here's an example of a Vue component, defined as a single-file component, that pulls content from Prismic. In this example we assume that you have a Single Custom Type with the API ID of home which contains 3 fields:

  • a Key Text field with an API ID of "title"
  • an Image field with an API ID of "logo"
  • a Rich Text field with an API ID of "rich_content"
Copy
<template>
  <div>
    <h1>{{ fields.title }}</h1>
    <prismic-image :field="fields.logo"/>
    <prismic-rich-text :field="fields.richContent"/>
  </div>
</template>

<script>
export default {
  data () {
    return {
      fields: {
        title: null,
        logo: null,
        richContent: null
      }
    };
  },
  methods: {
    getContent () {
      this.$prismic.client.getSingle('home')
        .then((document) => {
          this.fields.title = document.data.title;
          this.fields.logo = document.data.logo;
          this.fields.richContent = document.data.rich_content;
        })
    }
  },
  created () {
    this.getContent();
  }
}
</script>

Quick explanations

As you can see in this Vue component, the data object returns an object named fields containing the different Prismic fields we want to get. All of these fields are initialized at null. When the component is created the getContent method is run. It makes a query to get the "home" document from the Prismic repository. Finally we fill the fields object with the corresponding values from the Prismic document object we've just retrieved.

title is a Key Text field, meaning it's a plain string so it can be output using the "Mustache" syntax (double curly braces). logo is an Image field, we have to pass its content object to the :field prop of the <prismic-image/> component. Same principle for rich_content which is a Rich Text field. We have to pass its content object into the :field prop of the <prismic-rich-text/> component. These two Vue components are already defined and automatically imported by the prismic-vue plugin.

And your Prismic journey begins!

You should have all the tools now to really dig into your project. We invite you to further explore the documentation to learn about querying the Prismic API in the Query the API section and about content templating in the Templating section. Start by learning more on the How to Query the API page.

Take advantage of Prismic features

In order to take advantage of all that Prismic has to offer, check out the HTML Serializer,
In-Website Preview, and In-Website Edit Button documentation pages to learn how to add these great features into your Vue.js project.