Get Started with Vue.js and Prismic
This guide will show you how to get a project set up with Vue and Prismic in about twenty minutes.
If you're looking for information on using Prismic with Nuxt, see our Nuxt documentation:
If you want to jump right in, proceed to the install step:
You can get started with Prismic for free. Prismic has an unlimited free tier for one user. To learn more, see our pricing:
What skills will I need?
If a developer is setting up Prismic for you, you won't need any technical knowledge — Prismic is designed to be used by anyone.
Why Prismic and Vue work well together
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. Prismic even takes care of 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. To start building with Prismic and Vue 3, check out the documentation for the new kit.
Watch: Thinking 'bout Vue
Tune in to conversations about Vue, Jamstack, and component-based development from the Prismic Studio.
Six steps to get started
This guide will walk you through five steps to deploying your website and creating content. Here's what you'll do:
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:
Prismic includes tools for advanced configuration and for developing enterprise applications. Here are some resources for more advanced use-cases:
Links for leveling up:
Was this article helpful?
Can't find what you're looking for? Spot an error in the documentation? Get in touch with us on our Community Forum or using the feedback form above.