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
  • npm
  • Yarn
npx
Copy
npx create-nuxt-app <project-name>
npm
Copy
npm init nuxt-app <project-name>
Yarn
Copy
yarn 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:

Copy
npx @slicemachine/init@latest

What happens when you run @slicemachine/init

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

  1. Adds a start-slicemachine script to the package.json.
  2. Creates an slicemachine.config.json configuration file for your Slice Machine project, containing the API endpoint and the slice library location.
  3. Detect the application framework to add required packages.
  4. Creates a pages/slice-simulator.vue file to simulate slices.

What packages does the command add?

  • @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 settings to nuxt.config.js

Add the following settings to nuxt.config.js:

nuxt.config.js
Copy
 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"],
    },
  }

Can't find what you're looking for?

Need technical Support? Spot an error in the documentation? Get in touch with us on our Community Forum.