Vercel - Nuxt Image Providers

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.

Vercel requires you to explicitly list all the widths used in your app. See example below.

Domains

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

Example:

nuxt.config

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

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.

Don't forget to also take into account densities.

Example:

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

Uploadcare

Power up file uploading, processing and delivery for your app in one sitting.

Weserv

Optimize images with Weserv's dynamic image transformation service.