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:

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.

nuxt.config.js
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.

nuxt.config.js
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.

nuxt.config.js
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.

nuxt.config.js
export default {
  image: {
    presets: {
      avatar: {
        modifiers: {
          format: 'jpg',
          width: 50,
          height: 50
        }
      }
    }
  }
}
index.vue
<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.

nuxt.config.js
export default {
  image: {
    providers: {
      random: {
        provider: '~/providers/random',
        options: {}
      }
    }
  }
}
index.vue
<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.

nuxt.config.js
export default {
  image: {
    provider: 'twicpics',
    twicpics: {
      baseURL: 'https://nuxt-demo.twic.pics'
    }
  }
}
Edit this page on GitHub Updated at Sat, Apr 10, 2021