fix(vercel): added missing formats config & improved documentation (#…

…1514)
nuxt · Sep 26, 2024 · 543ddd6 · 543ddd6
1 parent ed3071e
commit 543ddd6
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 11 deletions.
diff --git a/docs/content/3.providers/vercel.md b/docs/content/3.providers/vercel.md
@@ -12,6 +12,10 @@ When deploying your nuxt applications to [Vercel](https://vercel.com/) platform,
 
 This provider will be enabled by default in vercel deployments.
 
+::callout{icon="i-heroicons-exclamation-triangle" color="amber"}
+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.
@@ -30,19 +34,33 @@ export default {
 
 ## Sizes
 
-Specify any custom `width` property you use in `<NuxtImg>`, `<NuxtPicture>` and `$img`.
+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.
 
+::callout{icon="i-heroicons-light-bulb"}
+Don't forget to also take into account [`densities`](/get-started/configuration#densities).
+::
+
 **Example:**
 
-```ts [nuxt.config]
-export default {
-  image: {
-    screens: {
-      icon: 40,
-      avatar: 24
+::code-group
+
+  ```html [index.vue]
+  <template>
+    <NuxtImg height="40" width="40" preset="cover" src="/nuxt-icon.png" />
+  </template>
+  ```
+
+  ```ts [nuxt.config]
+  export default {
+    image: {
+      screens: {
+        icon: 40,
+        icon2x: 80
+      }
     }
   }
-}
-```
+  ```
+
+::
diff --git a/src/provider.ts b/src/provider.ts
@@ -56,7 +56,7 @@ export const providerSetup: Partial<Record<ImageProviderName, ProviderSetup>> =
   ipx: ipxSetup(),
   ipxStatic: ipxSetup({ isStatic: true }),
 
-  // https://vercel.com/docs/more/adding-your-framework#images
+  // https://vercel.com/docs/build-output-api/v3/configuration#images
   vercel(_providerOptions, moduleOptions, nuxt: Nuxt) {
     nuxt.options.nitro = defu(nuxt.options.nitro, {
       vercel: {
@@ -65,6 +65,7 @@ export const providerSetup: Partial<Record<ImageProviderName, ProviderSetup>> =
             domains: moduleOptions.domains,
             minimumCacheTTL: 60 * 5,
             sizes: Array.from(new Set(Object.values(moduleOptions.screens || {}))),
+            formats: ['image/webp', 'image/avif'],
           },
         },
       } satisfies NitroConfig['vercel'],

diff --git a/src/runtime/providers/vercel.ts b/src/runtime/providers/vercel.ts
@@ -1,7 +1,7 @@
 import { stringifyQuery } from 'ufo'
 import type { ProviderGetImage } from '../../module'
 
-// https://vercel.com/docs/more/adding-your-framework#images
+// https://vercel.com/docs/build-output-api/v3/configuration#images
 
 export const getImage: ProviderGetImage = (src, { modifiers, baseURL = '/_vercel/image' } = {}, ctx) => {
   const validWidths = Object.values(ctx.options.screens || {}).sort((a, b) => a - b)