This article explains how to install and configure Prismic in a Nuxt project. By the end of this page, you will have Prismic utilities installed in your app.

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.

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

This command will prompt an option to name the project and a few other settings, such as selecting JavaScript or TypeScript and a package manager.

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

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

What happens when you run @slicemachine/init

This command prompts you to create or connect to a Prismic repo. Then it does the following:

Adds a start-slicemachine script to the package.json.

Creates an slicemachine.config.json configuration file for your Slice Machine project, containing the API endpoint and the Slice library location.

Detect the application framework to add required packages.

Creates a pages/slice-simulator.vue file to simulate Slices.

@nuxtjs/prismic, which injects helpers for fetching and templating Prismic content

slice-machine-ui, a local development environment for building Slices

@slicemachine/adapter-nuxt, the Nuxt adapter for Slice Machine

Add the following settings to nuxt.config.js:

+ import { repositoryName } from "./slicemachine.config.json"

  export default {
    buildModules: [
+     '@nuxtjs/prismic'
    ],
+   prismic: {
+     endpoint: `https://${repositoryName}.cdn.prismic.io/api/v2`,
+     modern: true
+     /* see configuration for more */
+   },
    build: {
+     transpile: ["@prismicio/vue"],
    },
  }

Nuxt.js - Setup a Prismic and Nuxt Project

Install Prismic

Start with a Nuxt project

Run the setup command

What happens when you run @slicemachine/init

Add settings to nuxt.config.js

← Previous

Next →