---
title: "Vercel"
description: "Optimize images at Vercel's Edge Network."
canonical_url: "https://nuxt.com/modules/image/providers/vercel"
---
# Vercel

> Optimize images at Vercel's Edge Network.

When deploying your Nuxt applications to [Vercel](https://vercel.com) platform, image module can use [Vercel's CDN](https://vercel.com/docs/cdn) to optimize images on demand.

This provider will be enabled by default in Vercel deployments.

::warning
Vercel requires you to explicitly list all the widths used in your app. [See example below.](#sizes)
::

## Domains

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

**Example:**

```ts [nuxt.config.ts]
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](https://vercel.com/docs/build-output-api/v3/configuration#api)).

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

::tip
Don't forget to also take into account [`densities`](https://nuxt.com/modules/image/configuration#densities).
::

**Example:**

::code-group
```vue [index.vue]
<template>
  <NuxtImg
    height="40"
    width="40"
    preset="cover"
    src="/nuxt-icon.png"
  />
</template>
```

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  image: {
    screens: {
      icon: 40,
      icon2x: 80
    }
    // will be converted to sizes: [40, 80] for Vercel output API
  }
})
```
::

## 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']`.

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  image: {
    vercel: {
      formats: ['image/webp']
    }
  }
})
```

### `minimumCacheTTL`

- Type: **Number** (optional)

Configure the minimum cache lifetime in seconds for optimized images.
By default, the provider uses `300`.

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  image: {
    vercel: {
      minimumCacheTTL: 3600
    }
  }
})
```

---

- [Source](https://github.com/nuxt/image/blob/main/src/runtime/providers/vercel.ts)


## Sitemap

See the full [sitemap](https://nuxt.com/sitemap.md) for all pages.