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.
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 create-nuxt-app <project-name>
npm init nuxt-app <project-name>
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.
npx @slicemachine/init
This command prompts you to create or connect to a Prismic repo. Then it does the following:
- Adds a slicemachine script to the package.json.
- Creates an sm.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.
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
import { apiEndpoint } from './sm.json'
export default {
buildModules: [
'@nuxtjs/prismic'
],
prismic: {
endpoint: apiEndpoint,
modern: true
/* see configuration for more */
},
build: {
transpile: ["@prismicio/vue"],
},
}
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:
<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:
{
"_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.
Was this article helpful?
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.