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 install -g prismic-cli@3.8.3-beta.0

If that doesn't work try using sudo. Why sudo?

sudo npm install -g 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):

npx 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

Run the Slice Machine Command

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.

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.

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

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. There are lots more you can do with the Slice Zone, check out the docs.

9 Rue de la Pierre Levée, 75011 Paris