image icon indicating copy to clipboard operation
image copied to clipboard

[nuxt3][vercel] Feature request: Support vercel provider for static app (nuxt generate)

Open hartmut-co-uk opened this issue 1 year ago • 5 comments

Feature

Feature request: Support (nuxt3) nuxt/image with vercel provider for static app -> nuxt generate.

Expected

Vercel config is generated and contains the "images" property which configures the Image Optimization feature.

Actual

Website is generated, <nuxt-image> components are processed fine, but vercel config does not contain the "images" property.

Reproduction example

https://github.com/hartmut-co-uk/nuxt3-generate-static-vercel-image

hartmut-co-uk avatar Sep 16 '22 05:09 hartmut-co-uk

@hartmut-co-uk This may be happening because static image generation is not supported yet (4th checkbox): https://github.com/nuxt/image/discussions/548

mrdannyjohnson avatar Sep 16 '22 08:09 mrdannyjohnson

Many thanks for the ref @mrdannyjohnson!

I'd guess this work item would mean image variants (srcset) are actually generated + packaged at pre-render ('generate') time using e.x. IPX?

Basically I might even prefer this option - but as far as this issue is concerned the Vercel Image Optimization(https://vercel.com/docs/concepts/image-optimization) should be used. Basically the website is static, pre-rendered - but using vercel images, like when running on nitro, SSR..

Example

  1. nuxt3 default using nuxt build, nitro, SSR via vercel edge function
    -> https://nuxt3-generate-static-vercel-image-lb046wh8w-info301.vercel.app/)
  2. vs. result of nuxt generate
    -> https://nuxt3-generate-static-vercel-image-7scsed04t-info301.vercel.app/

hartmut-co-uk avatar Sep 16 '22 09:09 hartmut-co-uk

Have you tried setting provider: 'vercel' in your image config?

danielroe avatar Sep 16 '22 10:09 danielroe

hah! And I thought something from this reproduction example was different from my actual project...

I've created following branch to show the state with provider: 'vercel': image-provider-vercel => vercel deployed as https://nuxt3-generate-static-vercel-image-lxienje6o-info301.vercel.app/

PS: Further I have changed the vercel project settings, see screenshot in branch README.. now using 'yarn generate' and default output directory. (this shouldn't make any difference though)

The generated image src/srcset now show correct use of vercel path... but what's missing as stated in initial post seems to be

Vercel config is generated and contains the "images" property

hartmut-co-uk avatar Sep 16 '22 12:09 hartmut-co-uk

any pointers which repo/package this actually would need to be solved with?

  • https://github.com/nuxt/framework ?
  • https://github.com/unjs/nitro ?

hartmut-co-uk avatar Sep 21 '22 14:09 hartmut-co-uk