All Technologies / 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.

Required knowledge

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.

Prerequisites

Before you get started, you will need:

  • Node.js
  • a package manager like npm or Yarn
  • a Nuxt project

Are you using Nuxt 3?

This documentation is written for Nuxt 2. Nonetheless, 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.

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'
import state from '~~/.slicemachine/libraries-state.json'

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.prismic.io/api/v2",
    "libraries": [
      "@/slices"
-   ]
+   ],
+   "localSliceSimulatorURL": "http://localhost:3000/slice-simulator"
  }

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

Next →

Model Content

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.