Model Content

On this page, you will learn how to generate a Slice component in your Nuxt project and model the content for it with Slice Machine. By the end of this page, you will have Custom Types and Slices synced between Prismic and your codebase, with one document created in Prismic.


In Prismic, content models (or schemas) are called Custom Types. Custom Types are made up of Fields (the smallest unit of content, like an atom) and Slices (groups of Fields, like molecules). You will create Custom Types and Slices in Slice Machine, the local development environment.

Before you proceed

First, you'll need a project with Nuxt and Prismic. If you don't have one yet, start with the setup step.

To get started, launch Slice Machine:

  • npm
  • Yarn
npm
Copy
npm run slicemachine
Yarn
Copy
yarn slicemachine

The terminal will show you a localhost link — by default, http://localhost:9999. Open it in your browser.

Create your first Custom Type

In Slice Machine, create a Custom Type. It might be something like “page”, “blog_post”, “homepage”, or “product.”

Custom Types are composed of a Static Zone and a Slice Zone.

  • The Static Zone has fields that only appear once in a document, like a title and unique identifier (UID).
  • The Slice Zone houses Slices, which are repeatable, rearrangeable sections of content — like an image, a block of text, or an FAQ.

Add your first static field by clicking Add a new field. Once you’re done, click Save to File System. Slice Machine will create a customtypes folder at the root of your project and save the JSON model for your new Custom Type inside.

Create your first Slice

"Create a new Slice" screen
Creating a new Slice.

To create your first Slice, click Slices in the left-hand menu, then click Create my first Slice. Give your Slice a PascalCased name, like TextBlock, ImageSlider, or CtaButton, and save it to your slices library. Add fields to your Slice and click Save model to filesystem.

Slice Machine will create the following files in your project:

  • /slices/ExampleSliceName/index.vue: The Vue component for your Slice
  • /slice/ExampleSliceName/model.json: The JSON model for your Slice, which syncs to Prismic
  • /slices/index.js: A map of all of your Slices
  • /.slicemachine/assets/slices/ExampleSliceName/mocks.json: A mock API response to simulate your Slice in the Slice Simulator

Now you have a directory at the root of your project called slices. Inside, you’ll find a directory for the Slice you just created. That directory contains an index.vue file, which is the Slice component. It contains some starter content.

Simulate your Slice

Simulate this new Slice to see what it looks like in your development environment. Ensure your app is running:

  • npm
  • Yarn
npm
Copy
npm run dev
Yarn
Copy
yarn dev

Now, on the Slice editor page, click Open Slice Simulator.

You should now see a simulated preview of your Slice with mock data.

Troubleshooting

You should have configured the Slice Simulator in the setup step. If you have trouble simulating your Slices, return to the setup step to make sure you have everything installed and configured correctly.

Code your Slice

Open /slices/ExampleSliceName/index.vue to code your Slice.

On the Slice editor page, click Show Code Snippets. These widgets include example code snippets to render Prismic’s field types. You can copy-paste them directly into your Slice component to start templating content.

Add Slices to Custom Types

Go back to the Custom Type that you created previously. Click Add Slices and select the Slice that you created. Then click Save File to File System.

Push Slices and Custom Types to Prismic

You have now created Custom Type and Slice models with Slice Machine, which are saved locally in your project. To use Slices and Custom Types in your documents, you must push them to Prismic.

On each model, click Push to Prismic. If necessary, you will be prompted to sign in and then click Push to Prismic again.

When Slice Machine is done syncing, the button will be disabled.

Sync each Custom Type.

Further learning: How Slice Machine works

Slice Machine is a powerful application. To learn more about how it works and what you can do with it, see the comprehensive guide, What Is Slice Machine?

Create your first document

Now that you have created Custom Type and Slice models, you can create content. Go to prismic.io/dashboard and click on your repository.

In the Documents tab of your repository, click the green pencil icon to create your first document.

When you’re done editing, click Save and Publish. Your first document is now live on the API.

Further learning: Editing

For more information on how to create and edit content in the Prismic editor, see the Core Concepts documentation.

Next steps

In the next step, you’ll query your first document from the Prismic API and template it in your app.


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.