Setup a Prismic and Nuxt Project

On this page, you will learn how to add the Slice Builder to your project manually. The automated setup adds settings that you might not need. These steps will allow you to customize your project.


⚠️ Prerequisites

Before proceeding, ensure you have:

1. Install dependencies

Run the following command to install the necessary dependencies to work with Prismic and Nuxt:

  • npm
  • Yarn
Copy
npm i @nuxtjs/prismic vue-slicezone nuxt-sm
Copy
yarn add @nuxtjs/prismic vue-slicezone nuxt-sm

What do these dependencies do?

Package

Usage

@nuxtjs/prismic

The SDK helps you connect your Nuxt.js application to your content hosted on Prismic.

vue-slicezone

This is a component that matches Prismic Slices with front-end components.

nuxt-sm

A Nuxt module necessary for SliceMachine.,


2. Add the Prismic Builder

The Prismic Builder allows you to build Slices and manage Custom Types locally while versioning everything inside your Next.js project.

Run the following command that will configure your project to work with the Prismic Builder:

Copy
npx @slicemachine/init

This command does the following:

1. Connects to a repo

The command will prompt you to create or connect to a Prismic repo.

2. Detects your framework

The command will detect the project framework to add the correct plugins.

Adds this dev dependency which is the local builder for creating Slices and Custom Types.

4. Slice Machine script

Adds a slicemachine script in the package.json that's used to run the builder.

5. sm.json

Creates this is the configuration file for your Slice Machine project, it contains the API endpoint and the Slice library location


3. Add settings to nuxt.config.js

Add the following settings to ~/nuxt.config.js:

Copy
// Truncated nuxt.config.js example file

import smConfig from "./sm.json";
import { getStoriesPaths } from "slice-machine-ui/helpers/storybook";

export default {
  // ...
  modules: [["@nuxtjs/prismic", {
    endpoint: smConfig.apiEndpoint || "",
  }], ["nuxt-sm"]],
  // Build Configuration (https://go.nuxtjs.dev/config-build)
  build: {
    transpile: ["vue-slicezone", "nuxt-sm"]
  },
  storybook: {
    // This is a bug with `getStoriesPaths` and Nuxt that is awaiting to be fixed
    stories: [...getStoriesPaths().map(path => path.replace("../", "~/"))]
  },
  // This is a bug with `getStoriesPaths` and Nuxt that is awaiting to be fixed
  ignore: [...getStoriesPaths().map(path => path.replace("../", "~/"))],
  generate: {
    fallback: '404.html' // Netlify reads a 404.html, Nuxt will load as an SPA
  }
}

4. Run the Builder

To launch the Builder, run the following command:

  • npm
  • Yarn
Copy
npm run slicemachine
Copy
yarn slicemachine

Learn how use the Builder

The following article will show you how to build Slices and components using the Prismic Builder.

Storybook

Storybook acts as a local development environment for your Slices, it will combine your mock data generated by the Prismic Builder with components files so you won't have to slow down and add content to Prismic to test your components.

Read our full documentation


Next steps

Now you have all the configuration ready to run your project. Next, you can add content to your pages.


Was this article helpful?
Not really
Yes, Thanks

Can't find what you're looking for? Get in touch with us on our Community Forum.