The Nuxt.config.js File

The nuxt.config.js file is the default config file for Nuxt projects. It contains settings for the @nuxt/prismic module. Here, you can specify options for this module, your slice libraries, and more. Learn more below. 👇

💡Add the @nuxtjs/prismic module to your 'nuxt.config.js' file

At minimum for your project to work, you will have to include @nuxtjs/prismic in the modules array and specify the endpoint (this should be done for you by the prismic sm --setup command). Depending on the slice library you are using, you may need additional configuration.

The @nuxtjs/prismic Module

You can configure the module options by using the prismic property or by using the array syntax in the buildModules array, like below.

Some of these options include:

See the full list of configuration properties here.

modules: [["@nuxtjs/prismic", {
  "endpoint": "https://your-repo-name.cdn.prismic.io/api/v2",
  "apiOptions": {
    "routes": [{
      "type": "page",
      "path": "/:uid"
    }]
  }
}], ["nuxt-sm"]],

⚠️Repository Endpoint

Make sure you replace the repo name with your own.

CSS Styles

This CSS will add the styling that makes the default components beautiful.

css: ["vue-essential-slices/src/styles/styles.scss"],

Polyfills

These polyfills make modern JS and CSS features from the default component library work in all browsers.

script: [{
  "src": "https://cdn.polyfill.io/v2/polyfill.min.js?features=Element.prototype.classList"
}, {
  "src": "https://cdn.jsdelivr.net/npm/focus-visible@5.0.2/dist/focus-visible.min.js"
}]

Extend the Build

When using Slice Machine, you will need to tell nuxt to transpile vue-slicezone and nuxt-sm like so.

build: {
  extend(config, ctx) {},
  transpile: ["vue-slicezone", "nuxt-sm"]
}
9 Rue de la Pierre Levée, 75011 Paris