---
title: "@nuxtjs/prismic - v4"
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.
* Display Prismic content with components and helpers.
* Set up Prismic [previews](https://prismic.io/docs/preview.md).
* Benefit from Prismic's integration in [Nuxt DevTools](https://devtools.nuxt.com).
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
```
# 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/linkRel` for a custom link rel attribute value.
* `~/prismic/richTextComponents` for a custom rich text components map.
* `~/prismic/sliceZoneDefaultComponent` for a custom slice zone default component.
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-11}
export default defineNuxtConfig({
modules: ["@nuxtjs/prismic"],
prismic: {
client: "~/path-to/client",
linkResolver: "~/path-to/linkResolver",
components: {
linkRel: "~/path-to/linkRel",
richTextComponents: "~/path-to/richTextComponents",
sliceZoneDefaultComponent: "~/path-to/sliceZoneDefaultComponent",
},
},
});
```
# 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 (recommended) or full endpoint. | 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. | None |
| 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 plugin's `clientConfig.routes` option. | None |
| injectComponents (optional) | boolean | Whether to auto-import [`@prismicio/vue`](https://prismic.io/docs/technical-reference/prismicio-vue.md) components within the Nuxt app. | `true` |
| 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` |
| devtools (optional) | boolean | Whether to enable Prismic's [Nuxt DevTools](https://devtools.nuxt.com) integration. | `true` |
| components (optional) | object (see definition below) | Options for [`@prismicio/vue`](https://prismic.io/docs/technical-reference/prismicio-vue.md) components. | `"~/prismic/linkRel"` |
**Child properties:**
| Property | Type | Description | Default |
| ------------------------------------------ | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------- |
| linkRel (optional) | string | A path to a file exporting a `rel` attribute's value to apply on links rendered by `PrismicLink`. A function can be exported to use the link's metadata to determine the `rel` value. | `"~/prismic/linkRel"` |
| imageWidthSrcSetDefaults (optional) | number\[] | Default widths to use when rendering an image with `PrismicImage`'s `widths="defaults"` option. | `[640, 828, 1200, 2048, 3840]` |
| imagePixelDensitySrcSetDefaults (optional) | number\[] | Default pixel densities to use when rendering an image with `PrismicImage`'s `pixel-densities="defaults"` option. | `[1, 2, 3]` |
| richTextComponents (optional) | string | A path to a file exporting a map of rich text block types to Vue components to use with `PrismicRichText`. | `"~/prismic/richTextComponents"` |
| sliceZoneDefaultComponent (optional) | string | A path to a file exporting a component rendered if a component mapping from the `SliceZone`'s `components` prop cannot be found. | `"~/prismic/sliceZoneDefaultComponent"` |
## `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}
Loading Prismic preview...
```
# Upgrading from v3
Follow these steps to upgrade an existing project to `@nuxtjs/prismic` v4.
1. **Install `@nuxtjs/prismic` v4**
```sh
npm install --save-dev @nuxtjs/prismic@^4
```
2. **Handle `@prismicio/vue` v5 breaking changes**
`@nuxtjs/prismic` now uses `@prismicio/vue` v5. This version introduces breaking changes, such as the removal of default wrappers for the `` and `` components.
Follow the [`@prismicio/vue` v5 upgrade guide](https://prismic.io/docs/technical-reference/prismicio-vue/v5.md#upgrading-from-v4).
3. **Update Nuxt plugins to depend on `@nuxtjs/prismic`**
> **Important**
>
> This step is only necessary for websites using a Nuxt plugin depending on `@nuxtjs/prismic`'s own plugin.
`@nuxtjs/prismic`'s Nuxt plugin is now [parallel](https://nuxt.com/docs/guide/directory-structure/plugins#parallel-plugins) for better performance. If a Nuxt plugin depends on `@nuxtjs/prismic`'s plugin, include it as a dependency.
```ts
export default defineNuxtPlugin({
name: "depends-on-prismic-nuxt-plugin",
dependsOn: ["prismic:setup"], // [!code ++]
async setup(nuxtApp) {},
});
```