Install Prismic

Quickstart from the dashboard

To start with a preconfigured project, go to prismic.io/dashboard and select Nuxt.

Dashboard

Start from scratch

This guide does not assume any prior knowledge of Vue and Nuxt, but a basic understanding would be helpful. For an introduction, see the documentation for Vue and Nuxt.

Create a Nuxt project

Before proceeding, you will need a Nuxt project. You can quickly create a brand new project using the following nuxi command. (Read the official documentation to learn more):

npx nuxi@latest init <project-name>

Then open your project:

cd <project-name>

Install dependencies:

npm install

Once it’s finished, you’ll have a brand new Nuxt project where you can install Slice Machine.

Run the setup command

At the root of your Nuxt project, run the following command:

npx @slicemachine/init@latest

Configure the slice simulator

The init command creates a pages/slice-simulator.vue file for the slice simulator. The slice simulator acts as a local development environment for your slices.

To finish setting up the slice simulator, update the slicemachine.config.json file at the root of your project to add the localSliceSimulatorURL property:

  {
    "repositoryName": "example-prismic-repo",
    "libraries": ["@/slices"],
+   "localSliceSimulatorURL": "http://localhost:3000/slice-simulator"
  }

The URL should reflect the URL of your development server.

Open your Page Builder to configure previews

Your Page Builder is accessible from prismic.io/dashboard. It’s the hosted part of your application, where your content lives.

In your Page Builder, go to Settings > Previews. Here, you can configure a preview environment for each environment that runs your application, like localhost, staging, and production.

In the Domain field, enter the root URL for the environment, like http://localhost:3000 or https://example.com.

In the Preview Route field, enter /preview (unless you have changed this route to something else in your nuxt.config.js).