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.


Start with a Nuxt project

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):

Copy
npx nuxi init <project-name>

Then open your project:

Copy
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:

Copy
mkdir pages && mv app.vue pages/index.vue

Install dependencies:

Copy
npm i

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:

Copy
npx @slicemachine/init@latest

What does this command do?

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 a slicemachine.config.json file for your Slice Machine project, containing the repository name and the Slice library location.
  3. Detects the application framework to add required packages.
  4. Creates a pages/slice-simulator.vue file to simulate Slices in development.
  5. 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

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 localSliceSimulatorURL property:

Copy
  {
    "repositoryName": "example-prismic-repo",
    "libraries": ["@/slices"],
   "localSliceSimulatorURL": "http://localhost:3000/slice-simulator"
  }

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 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?
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.