Vercel provider not configured correctly + Hacky fix

[MikeAltinget]

Using nuxt/image with nuxt/vercel-builder in a newly generated project does not work.

This is probably because nuxt/image uses File System Api v1, which seems to be deprecated. I think using the Build Output API v3 might fix this problem. However I don't know how to fix nuxt/image to use this API, while also using vercel-builder. They both need to write to the same config file during build, so they probably both need to be updated.

Alternatively nuxt/vercel-builder could be updated to accept an image config to pass to vercel. I have done that in this package: https://github.com/Altinget/vercel-builder. This package is a POC, but it works. If needed i can polish it and submit a PR to nuxt/vercel-builder.

If this option is chosen, I think it would make sense to upgrade @vercel/build-utils to 5.0.2, since this has better Typescript support for the new config options.

If you just want nuxt/image to work on Vercel, checkout this repo https://github.com/MikeBellika/starter_nuxt, more specifically vercel.json

{
  "version": 2,
  "builds": [
    {
      "src": "nuxt.config.js",
      "use": "@altinget/vercel-builder",
      "config": {
        "images": {
          "sizes": [
            320,
            640,
            768,
            1024,
            1280,
            1536,
            1536
          ],
          "domains": ["avatars.githubusercontent.com"],
          "minimumCacheTTL": 60,
          "formats": ["image/webp", "image/avif"]
        }
      }
    }
  ]
  }

[hartmut-co-uk]

hmm is the vercel-builder even still used/needed for nuxt3? 🤔 https://github.com/pi0/nuxt-on-the-edge

I can see using NITRO_PRESET=vercel-edge generates .vercel/output/ incl. .vercel/output/config.json - but missing the config for Vercel Image Optimisation https://github.com/vercel/examples/tree/main/build-output-api/image-optimization ?

{
  "private": true,
  "scripts": {
    "build": "NITRO_PRESET=vercel-edge nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview"
  },
  "devDependencies": {
    "@nuxt/image-edge": "^1.0.0-27628766.3629b9a",
    "nuxt": "3.0.0-rc.5"
  },
  "dependencies": {}
}

[pi0]

I'm working on a hook to use from image module extending config.

[beejaz]

I cant get nuxt3 image to work on Vercel, waiting to try this

[hartmut-co-uk]

I'm working on a hook to use from image module extending config.

is the hook part done/merged already? I thought I've had seen the relevant PR 🤔

[PikachuEXE]

Another one looking for a way to solve this I even try using ipx but https://github.com/nuxt/image/blob/v1/src/runtime/ipx.ts#L11 is hardcoded to use public While the nitro preset https://github.com/unjs/nitro/blob/v0.4.22/src/presets/vercel.ts#L14 is putting assets to static And I have idea how to hack it

Right now I can only fallback to img tag...

[Defite]

Using nuxt/image with nuxt/vercel-builder in a newly generated project does not work.

This is probably because nuxt/image uses File System Api v1, which seems to be deprecated. I think using the Build Output API v3 might fix this problem. However I don't know how to fix nuxt/image to use this API, while also using vercel-builder. They both need to write to the same config file during build, so they probably both need to be updated.

Alternatively nuxt/vercel-builder could be updated to accept an image config to pass to vercel. I have done that in this package: https://github.com/Altinget/vercel-builder. This package is a POC, but it works. If needed i can polish it and submit a PR to nuxt/vercel-builder.

If this option is chosen, I think it would make sense to upgrade @vercel/build-utils to 5.0.2, since this has better Typescript support for the new config options.

If you just want nuxt/image to work on Vercel, checkout this repo https://github.com/MikeBellika/starter_nuxt, more specifically vercel.json

{
  "version": 2,
  "builds": [
    {
      "src": "nuxt.config.js",
      "use": "@altinget/vercel-builder",
      "config": {
        "images": {
          "sizes": [
            320,
            640,
            768,
            1024,
            1280,
            1536,
            1536
          ],
          "domains": ["avatars.githubusercontent.com"],
          "minimumCacheTTL": 60,
          "formats": ["image/webp", "image/avif"]
        }
      }
    }
  ]
  }

After adding your vercel.json to my repo, deploy succeded, but I got 404 error "deployment no found".

[pi0]

Thanks to the nice PR by @mahdiboomeri https://github.com/unjs/nitro/pull/476, vercel should be supported out of the box again (https://github.com/nuxt/image/commit/4d8aab01b3a539120a5182b06d3a66d8eeabb683). Make sure to recreate lock file so that both nitropack 0.5.2+ and @nuxt/image dependencies are updated.

https://nuxt-image-demo-pi0-nuxt-js.vercel.app/

[hartmut-co-uk]

🚀 I can confirm this seems to be working fine with
e.g. nuxt.config.ts

import { defineNuxtConfig } from 'nuxt'
import { defineNitroConfig } from 'nitropack'

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
    app: { ... },
    modules: [
        '@nuxt/image-edge',
    ],
    nitro: defineNitroConfig({
        vercel: {
            config: {
                images: {
                    "sizes": [256, 320, 384, 600, 1000, 1536],
                    "domains": [],
                    "minimumCacheTTL": 60,
                    "formats": ["image/webp", "image/avif"]
                }
            }
        }
    })
})

[pi0]

@hartmut-co-uk Thanks for confirming but also you don't need explicit config it should work automatically with latest @nuxt/image-edge and add this default config.

[PikachuEXE]

Yes I confirm it's working without putting any config for vercel