Generate and Model a ComponentBeta

This article will teach you how to generate a component template and model the CMS data with The Slice Builder. In the example below we'll see how to create a 'Hero' component.


🕙 Are you using our starter project?

Hey, this article works best when using our pre-configured project boiler plate which will allow to jump right in an explore Prismic with Nuxt.js. Learn how to launch that here.

Generate a Component Template

The very first step is to generate the component files. For this, open your terminal, navigate to your project folder and simply run the following command:

Copy
prismic sm --create-slice

Once you run this command you will be shown the following prompts:

  • Select your local lib: Select the local library you're working with. The prismic sm --setup command adds a default @/slices path to your sm.json file, where @ means that the path local, you can choose this or create a new one.
  • Enter the name of your slice (2 words in PascalCase): For this example, we will call our Slice HeroSlice.

This command creates the following template files for a new component in a new ~/slices/HeroSlice folder in your project:

index.vue

The actual vue.js component file.

index.stories.js

The file that put everything together for Storybook.

mocks.json

This file contains a mock API response used later for developing the component locally.

model.json

This file contains the Slice fields data that will be forward to Prismic.

⚠️ Conflicting components?

If the component you've just created has a naming conflict with any components in the repository, you'll see a warning and the option to overwrite the components so that only one copy exists. Once there are no conflicts, you can enter the Slice Builder to begin modelling your data.


Create a Model with the Slice Builder

The next step will be to create the content model for your component. To do this we will need to open The Slice Builder!

💡 What is the Slice Builder?

A visual builder for you Slice Models with all the tools you need to generate data models and mock CMS content locally. This tool includes suggest code snippets & options for customising your mock data output.

Launch The Slice Builder

First, if you haven't already or are not using the 'Boiler Plate' project, you will need to add or run Storybook. This is necessary to create a preview of the component, read the full documentation here:

Copy
prismic sm --add-storybook

Then, to open The Slice builder, open a new terminal window and run the following command:

Copy
prismic sm --develop

Build Your Content Model (Slice)

Once you run the prismic sm --develop command, The Slice Builder, by default, will be running on http://localhost:9999.

When you visit this port, you can see The Slice Builder environment with your newly created slice (HeroSlice). Click on this slice, and you will see repeatable and non-repeatable zones where you can add any fields by clicking on the "+" icon.

Here are the fields we will add to the component, with their API IDs:

Title

A Rich Text field, API ID as title.

Description

A Rich Text field, API ID as description.

Date

A Date field, API ID as date.

Image

An Image field, API ID as image.

The 'field id' you enter here is the API ID that you will use to reference the field in the component code.

Once you've added your fields, click the 'Save model to file system' button; this will update the model.json and mocks.json files in your project.

The Slice Builder Example Video:


Customisation

Change Field Settings

If you want to edit any of these field's settings, click the icon ⚙️. For instance for a Rich Text field you field, you might want to restrict the field only to use <H2> tags or you might want to change the API ID of one of you fields, these sort of changes are handled here in the field settings.

Customise Your Mock Data

The Slice Builder also gives you control of the mock data that is generated. Click the edit button on your fields and select the 'Mock Config' tab. You'll be presented with different options here that will allow you output different mock data patterns so you can see how component with multiple variants or with a pattern that better matches your design.

The video below shows how this works:


Code Your Component