Strapi

Nuxt Image with Strapi integration


Integration between Strapi and the image module.

No specific configuration is required. You just need to specify strapi in your configuration to make it the default:

nuxt.config.js
export default {  image: {    strapi: {}  }}

Override default options:

nuxt.config.js
export default {  image: {    strapi: {      baseURL: 'http://localhost:1337/uploads/'    }  }}

Modifiers

The breakpoint modifier is used to specify the size of the image.

By default, when the image is uploaded and Enable responsive friendly upload Strapi setting is enabled in the settings panel the plugin will generate the following responsive image sizes:

NameLargest Dimension
small500px
medium750px
large1000px

You can override the default breakpoints. See the Upload configuration in the Strapi documentation.

If you don't set breakpoint modifier, the original image size will be used:

<nuxt-img provider="strapi" src="..." />

Define breakpoint modifier:

<nuxt-img provider="strapi" src="..." :modifiers="{ breakpoint: 'small' }" />
Only one breakpoint can be modified per image.