Install Prismic

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.

Start with a Nuxt project

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):

npx create-nuxt-app <project-name>

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.

Run the setup command

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

npx @slicemachine/init@latest

Add settings to nuxt.config.js

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"],
    },
  }