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
You will need the 3.8.3-beta.0 version of the Prismic CLI, check by running:
You can go to that version by running the following command:
npm install --global email@example.com
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
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
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.