Create your own Slices & Components

By now you've probably got your project up and running and you've used Slice Machine components to create a page. Naturally now you'll want to create your own components and link them to Prismic.

Well, thanks to Slice Machine it's super easy!

⚠️NOTE: Sending your Slice models to Prismic

Previously your Slice models were pushed to Prismic when using --create-slice, this is now the last step when building components with the Slice builder.

Create a new Slice

⚠️CLI Version

You will need the 3.8.3-beta.0 version of the Prismic CLI, check by running:

prismic --version.

You can go to that version by running the following command:

npm install --global prismic-cli@3.8.3-beta.0

If you run into any problems try uninstalling and reinstalling the CLI.

The --create-slice command will create the skeleton of a new Slice and the files needed to create a local preview of your component, including the model.json file, the mock data and a storybook file. This will give you the power to develop locally your entire component library.

Run the command and fill out the prompts:

prismic sm --create-slice

πŸ’‘Haven't defined your framework?

If you didn't use prismic sm --setup to set up your project, you'll need to specify this to generate the correct files when you create a new slice with:

prismic sm --create-slice --framework next

or

prismic sm --create-slice --framework nuxt

If you used prismic sm --setup then this is already done for you.

Here's an example of what running the command looks like. We select the @/slices local library (or create it if it doesn't exist), then we give it the name of NewSlice:

How the --create-slice command works

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

  • Select your local lib: Select the library you're working with. By default, the
    --setup command adds a default @/slices path to your sm.json file, where @ means that the path is local.
  • Enter the name of your slice: Name of your slice made by 2 PascalCased words.

When the command finishes you'll have a new Slice and it's Component ready to be used.

The component will have this structure in Nuxt.js:

slices / NewSlice
β”œβ”€β”€ index.vue
└── index.stories.js
└── mocks.json
└── model.json
└── preview.png

The component will have this structure in Next.js:

slices / NewSlice
β”œβ”€β”€ index.js
└── index.stories.js
└── mocks.json
└── model.json
└── preview.png

Next let's learn how to preview that component locally and then build it out with our Visual Editor!

πŸ’‘Deprecated: --pull command

Previously you could update your local Slices with Slice data from the Prismic repo using the experimental prismic sm --pull command. This has been deprecated and replaced by the process described in The Slice Builder Article.

9 Rue de la Pierre LevΓ©e, 75011 Paris