Vercel

When deploying your Nuxt applications to Vercel platform, image module can use Vercel's Edge Network to optimize images on demand.

This provider will be enabled by default in Vercel deployments.

Domains

To use external URLs (images not in public/ directory), hostnames should be whitelisted.

Example:

export default defineNuxtConfig({
  image: {
    domains: ['avatars0.githubusercontent.com']
  }
})

Sizes

You need to specify every custom width used in <NuxtImg>, <NuxtPicture> or $img for Vercel to resize them properly (source).

If a width is not defined, image will fallback to the next bigger width.

Example:

<template>
  <NuxtImg
    height="40"
    width="40"
    preset="cover"
    src="/nuxt-icon.png"
  />
</template>

export default defineNuxtConfig({
  image: {
    screens: {
      icon: 40,
      icon2x: 80
    }
  }
})

Options

formats

• Type: String (optional)

Specify the image format allow list for optimization. By default, the provider set the following formats: ['image/webp', 'image/avif'].

export default defineNuxtConfig({
  image: {
    vercel: {
      formats: ['image/webp']
    }
  }
})