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 BETA Prismic CLI

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

Copy

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

Copy

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

Copy

sudo npm install -g prismic-cli@3.8.3-beta.0

Copy

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.

Create a Nuxt app

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

Copy

npx create-nuxt-app my-slicemachine-project

Copy

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

Copy

cd my-slicemachine-project

Run the Slice Machine Command

Now you can run the Slice Machine setup command to configure your project.

Copy

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.

Create a page called '_uid.vue'

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.

Copy

<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.

Run your project

You're now ready to start your Nuxt project. Simply run the following command and follow the link to your localhost.

Copy

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.