Quick start
Before you start
To use Slice Machine you will need to have at least version 12.16.1 of node installed on your machine. You can check this by running the node -v command in your terminal. If you need to update, we explain how here.
This short, one page crash course is aimed to get your project running ASAP and it's designed for experienced developers.
Need a more detailed guide?
If you need a more detailed guide, then check out the Step by Step tutorial.
Install the latest BETA version of the Prismic CLI. (Check you version by running prismic --version and compare it to the latest version released on npm) You can do that by running the following command:
- npm
- yarn
npm install -g prismic-cli@3.8.3-beta.0
yarn global add prismic-cli@3.8.3-beta.0
Sometimes it's possible that a global (-g) command like this doesn't work because of permission levels on your machine. If that's the case for you, try executing the sudo command below:
- npm
- yarn
sudo npm install -g prismic-cli@3.8.3-beta.0
sudo yarn global add prismic-cli@3.8.3-beta.0
You'll want to see the latest version released on npm. If you run into any problems try uninstalling and reinstalling the CLI.
So wait…what’s Prismic?
There’s every chance that you’ve made it this far without knowing what Prismic is. We’re slightly offended, but we’ll get over it.
Prismic is a Headless CMS that offers unlimited custom types, API calls, and a bunch of other great things. You should really check it out.
If you don't already have a Nuxt app to test with, then you will need to create one. Do this by running the following command (You can see the full guide for creating a Nuxt app here):
- npm
- yarn
npx create-nuxt-app my-slicemachine-project
yarn create-nuxt-app my-slicemachine-project
NPX
If this NPX command isn't recognised then you can learn how to install NPX here.
then 'cd' in to your new project
cd my-slicemachine-project
Now you can run the Slice Machine setup command to configure your project.
prismic sm --setup
This step does few important things including installing dependencies, adding the default library and creating Prismic repository for your content. Learn more about what this command does here.
Inside the pages folder, you can add the Slice Zone component to a new page called '_uid.vue' by adding the following code, here we have specified this Prismic custom type 'page' and this page's route will dynamically be populated by the URL.
<template>
<slice-zone
type="page"
:uid="$route.params.uid"
/>
</template>
<script>
import SliceZone from 'vue-slicezone'
export default {
components: {
SliceZone
},
}
</script>
Want to add the Slice Zone to an existing page?
If you want to use the Slice Zone component with a pre-existing page, then you can follow this simple guide.
You're now ready to start your Nuxt project. Simply run the following command and follow the link to your localhost.
npm run dev
You can now visit http://localhost:3000/test to see the empty Slice Zone.

Then, visit your newly created repository by following the button in the empty SliceZone or going to https://prismic.io/dashboard.
Slice Zone. Where the magic really starts.
The Slice Zone is a custom component that we created to be the entry point on your pages for all your components. It’s where any components you’ve created or any components libraries that you are using are added to the page. It also automatically queries your Prismic repo, so less work with BIG results.