Module Options
Nuxt Image is configured with sensible defaults.
To configure the image module and customize its behavior, you can use the image property in your nuxt.config:
export default {
image: {
// Options
}
}
screens
List of predefined screen sizes.
These sizes will be used to generate resized and optimized versions of an image.
export default {
image: {
screens: {
xs: 320,
sm: 640,
md: 768,
lg: 1024,
xl: 1280,
xxl: 1536,
'2xl': 1536
},
}
}
domains
To enable image optimization on an external website, specify which domains are allowed to be optimized. This option will be used to detect whether a remote image should be optimized or not. This is needed to ensure that external urls can't be abused.
export default {
image: {
domains: ['https://nuxtjs.org']
}
}
intersectOptions
The module uses IntersectionObserver to detect whether the images are in the viewport or not. Use this option to modify IntersectionObserver options.
export default {
image: {
intersectOptions: {
rootMargin: '50px'
}
}
}
presets
Presets are collections of pre-defined configurations for your projects. Presets will help you to unify images all over your project.
export default {
image: {
presets: {
avatar: {
modifiers: {
format: 'jpg',
width: 50,
height: 50
}
}
}
}
}
<template>
<nuxt-img preset="avatar" src="/nuxt-icon.png" />
</template>
providers
In order to create and use a custom provider, you need to use the providers option and define your custom providers.
export default {
image: {
providers: {
random: {
provider: '~/providers/random',
options: {}
}
}
}
}
<template>
<nuxt-img provider="random" src="main.png" width="300" height="169" />
</template>
provider
Default: static
We can specify default provider to be used when not specified in component or when calling $img.
export default {
image: {
provider: 'twicpics',
twicpics: {
baseURL: 'https://nuxt-demo.twic.pics'
}
}
}