Get Started with Vue.js and Prismic

This technology has no Slice Machine integration

This framework has no integration with Prismic's developer tool, Slice Machine. You can still build a Prismic website with this technology by using Prismic's Legacy Builder. However, if you're starting a new project with Prismic, we strongly recommend using a technology that integrates with Slice Machine: Next.js or Nuxt.

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 you're a developer building a project with Prismic and Vue, we recommend that you already have a basic knowledge of JavaScript, CSS, Vue.js, and APIs.

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.

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:

How To

Prismic includes tools for advanced configuration and for developing enterprise applications. Here are some resources for more advanced use-cases:

Resources

Links for leveling up:


Was this article helpful?
Not really
Yes, Thanks

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.