Crash Course
This guide will show you how to add Prismic to a Nuxt.js project in about twenty minutes.
Learn how to use Prismic with Nuxt.
Prismic is a headless website builder. With a traditional CMS, you can manage a website’s text and images. With Prismic, you can also manage website components — so teams can build their entire website with Prismic.
Prismic works with Nuxt, a web framework for Vue. See how to create a new Prismic project with Nuxt in the Set up Prismic guide, or read on to learn Prismic basics.
Highlights of Prismic
Here are a few key Prismic features that will help you understand how Prismic works.
- Slices: Building blocks for websites (like website components, but for content)
- Slice Machine: The local development tool to configure Prismic
- Editor: The Prismic app where writers create content
To try Prismic yourself, follow along with the blue boxes:
Next, we’ll explain each of these three features.
Slices
Slices are Prismic’s star feature. They are sections of a page you can reuse as many times as you need — each time with new content. Slices bring the component-based workflow to the content editor. You (and your content team) are really going to love them.
To visualize what slices are, imagine breaking up (or “slicing” up 😉) a webpage into different sections. Some examples:
- Image with Text
- Signup Form
- Call to Action
As a Nuxt dev, you would typically create these sections as components. But imagine you could use these components in your content management system.
Guess what!? That’s what slices do.
You render your slices with Prismic’s <SliceZone> component. The <SliceZone> component requires two props:
- the slice array from the API
- a collection of Vue components corresponding to each slice type
The <SliceZone> component can render your entire page with just these two props.
Just like that ✨ you have a robust website builder for developers and content writers alike.
Slices are created using a local development tool called Slice Machine. Let’s go over that next.
Slice Machine
Slice Machine is the local development tool to build slices. Like most development tools, you run it from your terminal.
When you create a slice in Slice Machine, Slice Machine will generate the file structure for the slice.
You build the slice by adding fields. A Field stores a piece of data, like an image, a number, or text. For each field, Slice Machine will provide a code snippet to template the field in the React component.
As you develop your slice, you can simulate what the slice will look like in Slice Machine. Keep Slice Machine open in another window while you code so you can see your changes live as you save.
When you’re happy with your slice, you can push the slice and a screenshot of it to the Prismic Editor so that your content team can use the slice in the Editor.
In addition to slices, you use Slice Machine to create page types. Page types are models for the pages in your app.
Slice Machine pushes your slices and page types up to the Editor for usage by your content team. Let’s check out the Editor next.
Editor
The Editor is the app your content team uses to write content for the website. Prismic hosts the Editor for you.
While writing content, writers can click a button to see all available slices. Screenshots from Slice Machine show writers what each slice looks like.
Content writers can create, update, and delete documents, just like files on your computer. Everything is versioned so that content changes can be rolled back or restored.
Writers can preview content live on the website before publishing.
The Editor should feel familiar to most writers. Text formatting works just like in other word processors.
As a developer, you fetch the content that your writers create from the Prismic API using Prismic’s development kits.
Next steps
Now that you know the basics of Prismic, you’re ready to dive in and start building!
To start your project from scratch with a new setup, proceed to the Install step.