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 nuxi command. (Read the official documentation to learn more):
npx nuxi init <project-name>Then open your project:
cd <project-name>Nuxt 3 projects come with an app.vue file at the root by default. Create a pages directory, move the app.vue file into that directory, and rename pages/app.vue to pages/index.vue:
mkdir pages && mv app.vue pages/index.vueInstall dependencies:
npm iOnce it's finished, you'll have a brand new Nuxt project where you can install Slice Machine.
npx @slicemachine/init@latestWhat does this command do?
This command prompts you to create or connect to a Prismic repo. Then it does the following:
- Adds a
slicemachinescript to thepackage.json. - Creates a
slicemachine.config.jsonfile for your Slice Machine project, containing the repository name and the Slice library location. - Detects the application framework to add required packages.
- Creates a
pages/slice-simulator.vuefile to simulate Slices in development. - Configures the Prismic integration in
nuxt.config.js.
What packages does the command add?
@nuxtjs/prismic, which injects helpers for fetching and templating Prismic content@slicemachine/adapter-nuxt, which adapts Slice Machine to Nuxt.slice-machine-ui, a local development environment for building Slices
The init command creates a pages/slice-simulator.vue file for the Slice simulator. The Slice simulator acts as a local development environment for your Slices.
To finish setting up the Slice simulator, update the slicemachine.config.json file at the root of your project to add the localSliceSimulatorURL property:
{
"repositoryName": "example-prismic-repo",
"libraries": ["@/slices"],
"localSliceSimulatorURL": "http://localhost:3000/slice-simulator"
}The URL should reflect the URL of your development server.
Your Page Builder is accessible from prismic.io/dashboard. It's the hosted part of your application, where your content lives.
In your Page Builder, go to Settings > Previews. Here, you can configure a preview environment for each environment that runs your application, like localhost, staging, and production.
In the Domain field, enter the root URL for the environment, like http://localhost:3000 or https://example.com.
In the Preview Route field, enter /preview (unless you have changed this route to something else in your nuxt.config.js).
What is previewing?
Previews are one of Prismic's most powerful features. Previewing gives content editors the ability to view content without publishing it to a live site.
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.