Get Started with Vue.js and 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.
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.
Watch: Thinking ‘bout Vue
Tune in to conversations about Vue, Jamstack, and component-based development from the Prismic Studio.
What makes Vue.js easy to get started with? ft Sébastien ChopinSebastien Chopin and Sadek discuss how Vue.js is easy to get started with.
Open in YouTube
What are the differences between React and Vue.js? ft Sara VieiraWhat are the differences between React and Vue? Sara Vieira shares her thoughts.
Open in YouTube
Slices: Create flexible content pagesRenaud and Sadek are discussing Slices: chunks (blocks) of content that you can use in your CMS to compose your pages.
Open in YouTube
What is the JAMStack? ft Matt BiilmannMatt Bilmann, CEO of Netlify, speaks with Sadek about what JAMstack is and some of the key technologies and approaches that are becoming popular within the movement.
Open in YouTube
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:
- 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 repository. 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 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.
How To
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.
Resources
Links for leveling up: