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.
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@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:
- Adds a
start-slicemachine
script to thepackage.json
. - Creates an
slicemachine.config.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.
- 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 contentslice-machine-ui
, a local development environment for building slices@slicemachine/adapter-nuxt
, the Nuxt adapter for Slice Machine
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.