All Technologies / Vue.js

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:

Get Started with Nuxt.js and Prismic

Learn how to use Prismic with Nuxt.js.

If you want to jump right in, proceed to the install step:

Install Prismic in a Vue.js Project

Add the Prismic plugins and configure your Prismic integration.

You can get started with Prismic for free. Prismic has an unlimited free tier for one user. To learn more, see our pricing:

Prismic Pricing

Find the right plan for any size of project.

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

Watch: Thinking 'bout Vue

Prismic on YouTube

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:

1. Install Prismic

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. Fetch Data

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. Create Slices

As you grow your app, you'll need an easy way to add components. That's where Slices come in. On this page, you'll learn to render page sections with a SliceZone.

5. Deploy Your App

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.

6. Preview Drafts

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.

Advanced concepts

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

SEO

The pros and cons of using Vue for SEO and how to optimize your app.

Route Parameters

Use routing with Vue and Prismic.

Advanced Queries

Use predicates to create filtered queries.

Advanced Templating

Use an HTML Serializer to customize your Rich Text and Title markup.

Resources

Links for leveling up:

Explore Further

Links for learning Vue, going deeper with Prismic, and useful tools.

Example Projects

Launch pre-built Prismic–Vue examples.

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.