Documentation

Module Status

Similar to Nuxt 3, this module is currently under heavy development. We try to implement new features and port existing ones to Nuxt 3 following the new framework progress and growing feature set.

How to help?

This module is for now considered, like Nuxt 3, as unstable, however feel free to play with it and share your feedback with us!

Installation

Add @nuxtjs/prismic@alpha dependency to your project:

Then, add @nuxtjs/prismic to the modules section of your Nuxt config and configure your Prismic API endpoint:

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
    modules: ['@nuxtjs/prismic'],
    prismic: {
        endpoint: 'my-repository'
    },
});

For more configuration options, refer to the configuration reference section.

Examples

Here are few Nuxt-specific examples, for how to use the module refer to the comprehensive @prismicio/vue documentation

Fetching content

An @prismicio/client instance is available through the globally available usePrismic() composable. You can use it to fetch content from your Prismic repository inside Nuxt composables:

<script setup>
const { client } = usePrismic()
const { data: home } = await useAsyncData('home', () => client.getByUID('page', 'home'))
</script>

Templating content

The module injects multiple components to template Prismic data which are made available globally in your application:

Learn more about injected components in the @prismicio/vue documentation

Custom @prismicio/client

You can provide the module your own @prismicio/client instance by exporting one from the file configured in the client option (default: ~/app/prismic/client):

import { createClient } from '@prismicio/client'

export default createClient('my-repository')

Providing a Link Resolver

You can provide the module a Link Resolver by exporting one from the file configured in the linkResolver option (default: ~/app/prismic/linkResolver):

export default (doc) => {
    if (doc.type === 'page') {
        return `/${doc.uid}`
    }
}

Providing an HTML Serializer

You can provide the module an HTML Serializer by exporting one from the file configured in the htmlSerializer option (default: ~/app/prismic/htmlSerializer):

export default {
    paragraph: ({ children }) => `<p class="fooBar">${children}</p>`,
}

Custom preview page

You can override the default preview page by creating a page at the route configured in the preview option (default: /preview):

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

<script setup>
// The following code is mandatory for starting previews when entering this page
usePrismicPreview()
</script>

Configuration Reference

You can configure @nuxtjs/prismic with the prismic property in your Nuxt config.

import { defineNuxtConfig } from 'nuxt3'

export default defineNuxtConfig({
    prismic: {
        /* configuration */
    },
});

...PrismicPluginOptions

Refer to @prismicio/vue documentation for available options.

client

• Type: string
• Default: ~/app/prismic/client

Path to an optional file exporting an @prismicio/client instance for the module to use.

prismic: {
  client: '~/prismicClient.js' // attempt to import client from `~/prismicClient.js`
}

linkResolver

• Type: string
• Default: ~/app/prismic/linkResolver

Path to an optional file exporting a Link Resolver for the module to use.

prismic: {
  linkResolver: '~/prismicLinkResolver.js' // attempt to import client from `~/prismicLinkResolver.js`
}

htmlSerializer

• Type: string
• Default: ~/app/prismic/htmlSerializer

Path to an optional file exporting an HTML Serializer for the module to use.

prismic: {
  htmlSerializer: '~/prismicHTMLSerializer.js' // attempt to import client from `~/prismicHTMLSerializer.js`
}

preview

• Type: string | false
• Default: /preview

The route to use for the preview page, disable previews with false.

prismic: {
  preview: false // disable previews
}

Interface

type PrismicModuleOptions = PrismicPluginOptions & {
    client?: string;
    linkResolver?: string;
    htmlSerializer?: string;
    preview?: string | false;
}

Defaults

{
    client: '~/app/prismic/client',
    linkResolver: '~/app/prismic/linkResolver',
    htmlSerializer: '~/app/prismic/htmlSerializer',
    injectComponents: true,
    preview: '/preview'
}