---
title: "@nuxtjs/prismic - v5"
tags: ["latest"]
category: "api-references"
audience: developers
lastUpdated: "2026-01-06T08:09:00.000Z"
---

# Overview

`@nuxtjs/prismic` is the official Prismic package for creating [Nuxt](https://nuxt.com) websites.

With this package, you can:

* Query Prismic content with a dedicated [client](https://prismic.io/docs/technical-reference/prismicio-client/v7.md#createclient).
* Display Prismic content using [components](https://prismic.io/docs/technical-reference/prismicio-vue/v6.md#components).
* Set up Prismic [previews](https://prismic.io/docs/preview.md).

This page documents all APIs provided by `@nuxtjs/prismic`.

> See the [Nuxt guide](https://prismic.io/docs/nuxt.md) to learn how to build websites using this package.

# Install

`@nuxtjs/prismic` is automatically installed when [bootstrapping](https://prismic.io/docs/nuxt.md#set-up-a-nextjs-website) a [Nuxt](https://nuxt.com/) project with `@slicemachine/init`.

```sh
npx @slicemachine/init@latest
```

It can also be manually installed in any Nuxt project:

```sh
npx nuxi@latest module add prismic
```

[`@prismicio/client`](https://prismic.io/docs/technical-reference/prismicio-client.md) is a peer dependency and must be installed. The module will automatically install it for you if it's missing.

# Use a custom client, link resolver, etc.

Nuxt configuration has to be serializable. This means that you can't configure the Prismic module with functions and other non-serializable values directly in the `nuxt.config.ts` file.

Instead, you can provide those values through files that export the values you want to use. By default, the module will try to look for the following files in your project's `app` directory:

* `~/prismic/client` for a custom [client](https://prismic.io/docs/technical-reference/prismicio-client.md).
* `~/prismic/linkResolver` for a custom [link resolver](https://prismic.io/docs/route-resolver.md#link-resolver).
* `~/prismic/richTextComponents` for a custom rich text components map.

You can configure which files the module should use by configuring the paths to them in the module's options.

```ts filename=nuxt.config.ts {4-8}
export default defineNuxtConfig({
  modules: ["@nuxtjs/prismic"],
  prismic: {
    client: "~/path-to/client",
    linkResolver: "~/path-to/linkResolver",
    components: {
      richTextComponents: "~/path-to/richTextComponents",
    },
  },
});
```

# API

## `PrismicModule`

A [Nuxt module](https://nuxt.com/docs/guide/concepts/modules) that sets up Prismic in your project.

```ts filename=nuxt.config.ts
export default defineNuxtConfig({
  modules: ["@nuxtjs/prismic"],
  prismic: {
    endpoint: "example-prismic-repo",
  },
});
```

| Property                | Type                          | Description                                                                                                                                                                                                                                                                                                                                                                                                                                   | Default                          |
| ----------------------- | ----------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- |
| endpoint                | string                        | A Prismic repository name.                                                                                                                                                                                                                                                                                                                                                                                                                    | None                             |
| clientConfig (optional) | object                        | Options for [`@prismicio/client`](https://prismic.io/docs/technical-reference/prismicio-client.md) used to create a client. Only one of `clientConfig` or `client` can be used.                                                                                                                                                                                                                                                               | None                             |
| client (optional)       | string                        | A path to a file exporting a [`@prismicio/client`](https://prismic.io/docs/technical-reference/prismicio-client.md) instance to be used by the plugin. Only one of `clientConfig` or `client` can be used.                                                                                                                                                                                                                                    | `"~/prismic/client"`             |
| linkResolver (optional) | string                        | A path to a file exporting a [link resolver](https://prismic.io/docs/route-resolver.md#link-resolver) function used to determine a URL from a link field or document. If it returns a value, it takes priority over a [route resolver](https://prismic.io/docs/route-resolver.md). Prefer using only a [route resolver](https://prismic.io/docs/route-resolver.md) with the module's `clientConfig.routes` option or your own Prismic client. | `"~/prismic/linkResolver"`       |
| preview (optional)      | string \| false               | The preview endpoint used to route content writers to a previewed document. Set to `false` to disable previews.                                                                                                                                                                                                                                                                                                                               | `"/preview"`                     |
| toolbar (optional)      | boolean                       | Whether to inject the [Prismic toolbar](https://prismic.io/docs/preview.md#the-toolbar). The toolbar is required for [content previews](https://prismic.io/docs/preview.md) to work.                                                                                                                                                                                                                                                          | `true`                           |
| components (optional)   | object (see definition below) | Options for [`@prismicio/vue`](https://prismic.io/docs/technical-reference/prismicio-vue.md) components.                                                                                                                                                                                                                                                                                                                                      | `"~/prismic/richTextComponents"` |

**Child properties:**

| Property                      | Type   | Description                                                                                            | Default                          |
| ----------------------------- | ------ | ------------------------------------------------------------------------------------------------------ | -------------------------------- |
| richTextComponents (optional) | string | A path to a file exporting the components or shorthand definitions for rich text and table components. | `"~/prismic/richTextComponents"` |

## `usePrismicPreview`

Resolves a [content preview](https://prismic.io/docs/preview.md) on the `preview` entry page.

```ts
usePrismicPreview();
```

| Parameter             | Type   | Description                                                                        | Default |
| --------------------- | ------ | ---------------------------------------------------------------------------------- | ------- |
| defaultURL (optional) | string | The default redirect URL if a URL cannot be determined for the previewed document. | `"/"`   |

The module creates a default preview page at the route defined by the `preview` module option (`/preview` by default).

You can customize it by creating your own page matching this route (`~/pages/preview.vue` by default). When doing this, the route must call `usePrismicPreview()` to resolve previews.

```vue filename=~/pages/preview.vue {2}
<script setup lang="ts">
usePrismicPreview();
</script>

<template>
  <p>Loading Prismic preview...</p>
</template>
```

# Upgrading from v4

Follow these steps to upgrade an existing project to `@nuxtjs/prismic` v5.

1. **Install `@nuxtjs/prismic` v5 and `@prismicio/client`**

   [`@prismicio/client`](https://prismic.io/docs/technical-reference/prismicio-client.md) is now a peer dependency and must be installed.

   ```sh
   npm install --save-dev @nuxtjs/prismic@^5 @prismicio/client
   ```

2. **Handle `@prismicio/vue` v6 breaking changes**

   `@nuxtjs/prismic` now uses `@prismicio/vue` v6. This version introduces breaking changes, such as the removal of wrapper support for the `<PrismicText>`, `<PrismicRichText>`, and `<SliceZone>` components.

   Follow the [`@prismicio/vue` v6 upgrade guide](https://prismic.io/docs/technical-reference/prismicio-vue/v6.md#upgrading-from-v5).

3. **Remove `~/prismic/linkRel` file**

   The `~/prismic/linkRel` file is no longer supported and the module `components.linkRel` option was removed. Create your own link component with defaults instead.

   ```vue filename=components/MyPrismicLink.vue
   <script lang="ts" setup>
   import type { PrismicLinkProps } from "@prismicio/vue";
   import { PrismicLink } from "@prismicio/vue";

   withDefaults(defineProps<PrismicLinkProps>(), {
     rel: "noopener noreferrer",
   });
   </script>

   <template>
     <PrismicLink v-bind="$props"><slot /></PrismicLink>
   </template>
   ```

4. **Remove `~/prismic/sliceZoneDefaultComponent` file**

   The `~/prismic/sliceZoneDefaultComponent` file is no longer supported and the module `components.sliceZoneDefaultComponent` option was removed. Create your own slice zone component with defaults instead.

   ```vue filename=components/MySliceZone.vue
   <script lang="ts" setup>
   import type { SliceZoneProps } from "@prismicio/vue";
   import { SliceZone } from "@prismicio/vue";
   import DefaultSlice from "./DefaultSlice.vue";

   withDefaults(defineProps<SliceZoneProps>(), {
     defaultComponent: () => DefaultSlice,
   });
   </script>

   <template>
     <SliceZone v-bind="$props" />
   </template>
   ```

5. **Remove `~/prismic/richTextSerializer` file**

   The `~/prismic/richTextSerializer` file is no longer supported and the module `richTextSerializer` option was removed. Migrate to the [component-based serializer](https://prismic.io/docs/technical-reference/prismicio-vue/v6.md#prismicrichtext) using `~/prismic/richTextComponents` instead.

6. **Remove DevTools module option**

   This option was removed along with the DevTools integration.

   ```ts filename=nuxt.config.ts
   export default defineNuxtConfig({
     modules: ["@nuxtjs/prismic"],
     prismic: {
       endpoint: "example-prismic-repo",
       devtools: true, // [!code --]
     },
   });
   ```

7. **Remove `injectComponents` module option**

   This option was removed. Prismic components are now auto-imported based on your Nuxt project's auto-imports configuration.

   ```ts filename=nuxt.config.ts
   export default defineNuxtConfig({
     modules: ["@nuxtjs/prismic"],
     prismic: {
       endpoint: "example-prismic-repo",
       injectComponents: true, // [!code --]
     },
   });
   ```