Documentation
Easily connect your Nuxt 3 application to your content hosted on Prismic
This is the documentation for @nuxtjs/prismic
version 3, the Prismic module for Nuxt 3.
If you're using Nuxt 2 or Nuxt Bridge, check out the documentation for the previous version of the @nuxtjs/prismic
at prismic.nuxtjs.org.
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:
yarn add --dev @nuxtjs/prismic@alpha
npm install --save-dev @nuxtjs/prismic@alpha
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:
<prismic-rich-text :field="doc.text" />
<prismic-text :field="doc.text" />
<prismic-link :field="doc.link">My link</prismic-link>
<prismic-image :field="doc.image" />
<prismic-embed :field="doc.embed" />
<slice-zone :slices="doc.body" :components="components" />
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
and linkResolver
options are replaced, see below.
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'
}