Configuration

Easily connect your Nuxt.js application to your content hosted on Prismic

You can configure @nuxtjs/prismic with the prismic property in your nuxt.config.js or directly when registering the module in the buildModules array by using the array syntax.

nuxt.config.js
export default {
  prismic: {
    /* configuration */
  }
}
nuxt.config.js
export default {
  buildModules: {
    ['@nuxtjs/prismic', {
      /* configuration */
    }]
  }
}

Properties

endpoint

  • Type: String
  • required

The endpoint of your Prismic repository.

nuxt.config.js
prismic: {
  // getting content from the Prismic repository named `my-repo`
  endpoint: 'https://my-repo.cdn.prismic.io/api/v2'
}

apiOptions

  • Type: Object
  • Default: {}

Options sent to Prismic API when initing the client, see Prismic documentation.

nuxt.config.js
prismic: {
  // example querying a private Prismic repository
  // please note that the token will bleed in the front-end
  apiOptions: {
    accessToken: 'yourAccessToken'
  }
}

New Routes Resolver

A new routes resolver is being introduced, which replaces the link resolver function with a single JSON declaration. You can take advantage of it by passing a routes options to the API:

nuxt.config.js
prismic: {
  apiOptions: {
    // example resolving documents with type `page` to `/:uid`
    routes: [
      {
        type: 'page',
        path: '/:uid'
      }
    ]
  }
}

Documents coming from the API will then have a new url property, removing the need to use a link resolver.

Learn more about the new routes resolver here.

preview

  • Type: Boolean|String
  • Default: true

Activate previews on the website, learn more about the preview feature here.

nuxt.config.js
prismic: {
  preview: false // disable previews
}

previewReloadType

v1.3+
  • Type: String
  • Default: 'hot'

Configures the preview reload type, learn more about the preview feature here.

nuxt.config.js
prismic: {
  previewReloadType: 'hard' // performs hard reloads when reloading the preview
}

components

  • Type: Boolean
  • Default: true

Registers @prismicio/vue components globally.

nuxt.config.js
prismic: {
  components: false // disable components global registration
}

linkResolver

  • Type: String(path)|Function
  • Default: ~/app/prismic/link-resolver.js

Your link resolver function. By default the module expects you to have it exported at ~/app/prismic/link-resolver.js, see installation.

nuxt.config.js
prismic: {
  // you can provide your link resolver function directly
  linkResolver: function(doc) {
    return '/'
  }
}

htmlSerializer

  • Type: String(path)|Function
  • Default: ~/app/prismic/html-serializer.js

Your html serializer function if you need one. By default the module expects you to have it exported at ~/app/prismic/html-serializer.js.

modern

v1.3+
  • Type Boolean
  • Default: false

This option allows the module to use future-proof features. When set to true it:

  • Turns off deprecated features unless explicitly enabled (this only impact disabledGenerator below, automatically disabling it);
  • Tells the module to use the more recent Prismic.client method instead of the old Prismic.api one when initing the API. This allows the API to lazily init itself once in production, saving your website from useless calls. Although this comes with some minor breaking changes (that won't impact you 99% of the time), see #134 for more information.

disableGenerator

Deprecated
  • Type: Boolean
  • Default: false

When using the new routes resolver this module is providing a crawler feature that will crawl your Prismic documents and extending Nuxt.js generate.routes array (see Nuxt.js documentation) with routes to those.

Since version 2.13 Nuxt.js is shipped with a built-in crawler so this module's crawler feature is being deprecated. If you're using Nuxt.js >= 2.13 you should be interested in disabling this module's generator with this option.

nuxt.config.js
prismic: {
  disableGenerator: true // disable module's crawler
}

Defaults

Default configuration only expects you to provide your Prismic API endpoint.

nuxt.config.js
export default {
  prismic: {
    preview: true,
    previewReloadType: 'hot',
    components: true,
    modern: false
  }
}
Edit this page on GitHub Updated at Sun, May 28, 2023