Integrating Prismic with an existing project (generic setup)

If you already have a project that you want to integrate with Prismic, 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.

2. Include the prismic-vue plugin script

Now let's add the prismic-vue plugin script in your code:

Copy
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/prismic-vue"></script>

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 global variable before including the Prismic Toolbar script.

Make sure to add the following code with your repository's name and before creating a Vue instance:

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

Here's an example of a Link Resolver function:

Copy
function linkResolver (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 Single Custom Type with the API ID of "example"
  if (doc.type === 'example') {
    return '/example';
  }
  
  // Default to the root
  return '/';
}

5. Use the prismic-vue plugin

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

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

6. Query and integrate your content

Here's an example 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
<div id="app">
  <h1>{{ fields.title }}</h1>
  <prismic-image :field="fields.logo"/>
  <prismic-rich-text :field="fields.richContent"/>
</div>

<script>
  function linkResolver (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 Single Custom Type with the API ID of "example"
    if (doc.type === 'example') {
      return '/example';
    }
    
    // Default to the root
    return '/';
  }

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

  var app = new Vue({
    el: '#app',
    data: {
      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 contains an object named fields containing the different Prismic fields we want to get, all initialized at null. When the Vue instance is created the getContent method is run, it gets the Prismic API object, then make a query to get the "home" document from the Prismic repository. Finally we fill the fields object with the corresponding values from the Prismic's 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 richContent which is a Rich Text field, we have to pass its content object to 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.