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.
Quickstart from the dashboard
To start with a preconfigured project, go to prismic.io/dashboard and select Nuxt 3.
Start from scratch
Create a Nuxt project
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:
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
mkdir pages && mv app.vue pages/index.vue
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:
What 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 the
- 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
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
Configure the slice simulator
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
The URL should reflect the URL of your development server.
Open your Page Builder to configure previews
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
In the Preview Route field, enter
/preview (unless you have changed this route to something else in your
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.