@nuxtjs/prismic - v4
Overview
@nuxtjs/prismic is the official Prismic package for creating Nuxt websites.
With this package, you can:
Query Prismic content with a dedicated client.
Display Prismic content with components and helpers.
Set up Prismic previews.
Benefit from Prismic’s integration in Nuxt DevTools.
This page documents all APIs provided by @nuxtjs/prismic.
Install
@nuxtjs/prismic is automatically installed when bootstrapping a Nuxt project with @slicemachine/init.
npx @slicemachine/init@latestIt can also be manually installed in any Nuxt project:
npx nuxi@latest module add prismicAPI
PrismicModule
A Nuxt module that sets up Prismic in your project.
export default defineNuxtConfig({
modules: ["@nuxtjs/prismic"],
prismic: {
endpoint: "example-prismic-repo",
},
});endpointstringA Prismic repository name (recommended) or full endpoint.
clientConfigobjectOptions for @prismicio/client
used to create a client. Only one of clientConfig or client can be
used.
clientstringA path to a file exporting a
@prismicio/client instance to
be used by the plugin. Only one of clientConfig or client can be used.
linkResolverstringA path to a file exporting a 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. Prefer using only a route
resolver with the plugin’s clientConfig.routes option.
injectComponentsbooleanWhether to auto-import
@prismicio/vue components within
the Nuxt app.
truepreviewstring | falseThe preview endpoint used to route content writers to a previewed
document. Set to false to disable previews.
"/preview"toolbarbooleanWhether to inject the Prismic toolbar. The toolbar is required for content previews to work.
truecomponentsobjectOptions for @prismicio/vue
components.
linkRelstringA 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"imageWidthSrcSetDefaultsnumber[]Default widths to use when rendering an image with PrismicImage’s
widths="defaults" option.
[640, 828, 1200, 2048, 3840]imagePixelDensitySrcSetDefaultsnumber[]Default pixel densities to use when rendering an image with
PrismicImage’s pixel-densities="defaults" option.
[1, 2, 3]richTextComponentsstringA path to a file exporting a map of rich text block types to Vue
components to use with PrismicRichText.
"~/prismic/richTextComponents"sliceZoneDefaultComponentstringA path to a file exporting a component rendered if a component mapping
from the SliceZone’s components prop cannot be found.
"~/prismic/sliceZoneDefaultComponent"
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.tsfile.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
appdirectory:~/prismic/clientfor a custom client.~/prismic/linkResolverfor a custom link resolver.~/prismic/linkRelfor a custom link rel attribute value.~/prismic/richTextComponentsfor a custom rich text components map.~/prismic/sliceZoneDefaultComponentfor 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.
nuxt.config.tsexport 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", }, }, });
usePrismicPreview
Resolves a content preview on the preview entry page.
usePrismicPreview("/");defaultURLstringThe default redirect URL if a URL cannot be determined for the previewed document.
"/"Define a custom preview page
You can customize the page used to open content previews by creating your own at the route defined by the
previewmodule option (~/pages/preview.vueby default). The route must callusePrismicPreview()to resolve previews.~/pages/preview.vue<script setup lang="ts"> usePrismicPreview(); </script> <template> <p>Loading Prismic preview...</p> </template>
Upgrading from v3
Follow these steps to upgrade an existing project to @nuxtjs/prismic v4.
Install
@nuxtjs/prismicv4npm install --save-dev @nuxtjs/prismic@^4Handle
@prismicio/vuev5 breaking changes@nuxtjs/prismicnow uses@prismicio/vuev5. This version introduces breaking changes, such as the removal of default wrappers for the<PrismicText>and<PrismicRichText>components.Follow the
@prismicio/vuev5 upgrade guide.Update Nuxt plugins to depend on
@nuxtjs/prismic@nuxtjs/prismic’s Nuxt plugin is now parallel for better performance. If a Nuxt plugin depends on@nuxtjs/prismic’s plugin, include it as a dependency.export default defineNuxtPlugin({ name: "depends-on-prismic-nuxt-plugin", dependsOn: ["prismic:setup"], async setup(nuxtApp) {}, });