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 web pages. 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."

When you use Prismic with Vue, your Slices map one-to-one with Vue components, creating a powerful and dynamic page builder experience. The result is a blazing-fast web app that is easy to edit and update. 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.

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:

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.