Vue.js with Prismic

Vue.js is one of the most popular web development frameworks. It is API- and component-based, which makes it a perfect match for Prismic. Why?

Why Vue + Prismic?

In Vue, you can build reusable components — like lego blocks — to construct webpages. Imagine that you had a collection of components called RichText, BigPhoto, and VideoEmbed. With component-based development, you can put them together however you like. Prismic structures your content the same way, in reusable data chunks that we call "Slices."

By using Prismic with Vue, your Slices can map one-to-one with Vue components, creating a powerful and dynamic page builder experience. The result is a blazing-fast web app. Prismic even takes care of things like image optimization, content versioning, and user permissions.

Are you using Vue 3?

This documentation is written for Vue 2. Nonetheless, at Prismic we're very 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 alpha kit.

Watch: Thinkin 'Bout Vue

Prismic on YouTube

Tune in to conversations about Vue, JAMstack, and component-based development from the Prismic Studio.

Overview of the Prismic-Vue Journey

This guide will show you how to build a site with Prismic and Vue.js. It breaks down like this:

Steps 1–4 will take you from a new Vue project to a deployed site.
Steps 5–10 will show you how to optimize to your web app.
Step 11 gives you some examples and tutorials to explore.

Heads up! Before you get started...

This guide assumes you have already installed Node.js and a package manager (like npm or Yarn) and set up a Vue project.

If you don't have those, here are some guides we recommend:

Here are the steps on your journey:

1. Setup

In this step, you'll add the Prismic plugins to your Vue project. By the end of the page, you'll have a collection of Prismic utilities available globally in your project.

2. Query the API

Next, you'll learn how to use your new Prismic utilities to retrieve data from your Prismic repo. By the end of this step, you will have data from Prismic in your Vue app.

3. Template Content

Once you have Prismic data in your project, you can display it on the page. In this step, you'll learn how to render various types of content. By the end of this step, you will content from Prismic displaying on your site.

4. Deploy

In this step, you'll learn how to deploy your site on Netlify or Vercel. By the end of this step, you will have a live website online.

5. Set up Previews

With your site online, you'll want to be able to preview drafts before you make them live. By the end of this step, you'll have one-click previewing set up.

6. Create a SliceZone

As you grow your app, you'll need an easy way to add components. The SliceZone can handle that for you. By the end of this page, you'll be rendering page sections with a custom-built SliceZone.

7. Perform Advanced Queries

The Prismic API has very powerful and flexible searching functionality. This page will show you how to build any query you can imagine.

8. Create Advanced Templates

Prismic offers you a tool to customize the HTML output of Rich Text fields, called an HTML Serializer. On this page, you'll learn how to customize the HTML Serializer.

9. Use Route Parameters

If you want your page to have multi-page navigation, you'll need a way to change the content of your app when the URL changes. In this step, you'll learn how to create route-based navigation.

10. Optimize for Search Engines

When it comes to search engine optimization, Vue has advantages and disadvantages. On this page, you'll learn what they are and how to address them.

11. Explore More

There are limitless possibilities for building with Prismic and Vue. Find inspiration, here.

Was this article helpful?

Not really

Yes, Thanks

Can't find what you're looking for? Get in touch with us on our Community Forum.