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

Install#

@nuxtjs/prismic is automatically installed when bootstrapping a project with @slicemachine/init.

npx @slicemachine/init@latest

It can also be manually installed in any Nuxt project:

npx nuxi@latest module add prismic

API#

PrismicModule#

A Nuxt module that sets up Prismic in your project.

export default defineNuxtConfig({
  modules: ["@nuxtjs/prismic"],
  prismic: {
    endpoint: "example-prismic-repo",
  },
});

components options#

• 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.
  • ~/prismic/linkResolver for a custom 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.

  nuxt.config.ts

  Copy

  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",
      },
    },
  });

usePrismicPreview#

Resolves a content preview on the preview entry page.

usePrismicPreview("/");

• 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 preview module option (~/pages/preview.vue by default). The route must call usePrismicPreview() to resolve previews.

  ~/pages/preview.vue

  Copy

  <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/prismic v4#

  npm install --save-dev @nuxtjs/prismic@^4

• 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 <PrismicText> and <PrismicRichText> components.

  Follow the @prismicio/vue v5 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) {},
  });