Developers / Nuxt / Setup

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

This documentation is for Nuxt 2

This documentation is written for Nuxt 2. Are you using Nuxt 3? At Prismic we're very excited about Nuxt 3. We have already released a development version of our package for Nuxt 3. In the near future, this documentation will be upgraded to Nuxt 3.

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

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

  1. Adds a slicemachine script to the package.json.
  2. Creates an sm.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.

What packages does the command add?

  • @nuxtjs/prismic, which injects helpers for fetching and templating Prismic content
  • @prismicio/slice-simulator-vue, which lets you simulate Prismic Slices in development
  • slice-machine-ui, a local development environment for building Slices

Add settings to nuxt.config.js

Add the following settings to nuxt.config.js:

nuxt.config.js
Copy
 import { apiEndpoint } from './sm.json'

  export default {
    buildModules: [
     '@nuxtjs/prismic'
    ],
   prismic: {
     endpoint: apiEndpoint,
     modern: true
     /* see configuration for more */
   },
    build: {
     transpile: ["@prismicio/vue"],
    },
  }

Set up the Slice Simulator

The Slice Simulator acts as a local development environment for your Slices. It previews your Slice components with mock data generated by Slice Machine, allowing you to quickly preview and develop your Slices.

In your pages directory, create a file called slice-simulator.vue and paste in the following code:

pages/slice-simulator.vue
Copy
<template>
  <SliceSimulator v-slot="{ slices }" :state="state">
    <SliceZone :slices="slices" :components="components" />
  </SliceSimulator>
</template>

<script>
import { SliceSimulator } from '@prismicio/slice-simulator-vue'
import { components } from '~/slices'

export default {
  components: {
    SliceSimulator
  },
  data () {
    return { state: {}, components }
  }
}
</script>

Update the sm.json file at the root of your project to add the localSliceSimulatorURL property:

Copy
  {
    "_latest": "0.3.1",
    "apiEndpoint": "https://your-repo-name.cdn.prismic.io/api/v2",
    "libraries": [
      "@/slices"

   ],
   "localSliceSimulatorURL": "http://localhost:3000/slice-simulator"
  }

Update the port and page path if you have customized these.

← Previous

Crash Course

Next →

Define Routes

Was this article helpful?
Not really
Yes, Thanks

Can't find what you're looking for? Spot an error in the documentation? Get in touch with us on our Community Forum or using the feedback form above.