NuxtN
Nuxt•14mo ago
kb

NuxtImg + Vercel

Im using NuxtImg on Vercel, but I cannot figure out what I need to put in the nuxt.config.js because the docs say im supposed to supply every custom width? (https://image.nuxt.com/providers/vercel)

I am running vuetify, and tailwind, if this helps. But as far as sizes, in the given component, im rendering out a few images, with unique sizes per, where im passing this; into my NuxtImg, sizes (in a loop)
 [
  {
    "src": "/home-bg/home-bg-top-1.webp",
    "class": "home-bg-top-1",
    "sizes": "xs:56px sm:104px md:88px lg:120px xl:136px",
    "key": "home-bg-top-1"
  },
  {
    "src": "/home-bg/home-bg-top-2.webp",
    "class": "home-bg-top-2",
    "sizes": "xs:66px sm:114px md:98px lg:130px xl:146px",
    "key": "home-bg-top-2"
  },
  {
    "src": "/home-bg/home-bg-top-3.webp",
    "class": "home-bg-top-3",
    "sizes": "xs:130px sm:146px md:146px lg:226px xl:226px",
    "key": "home-bg-top-3"
  },
  {
    "src": "/home-bg/home-bg-top-4.webp",
    "class": "home-bg-top-4",
    "sizes": "xs:62px sm:78px md:94px lg:110px xl:126px",
    "key": "home-bg-top-4"
  },
  {
    "src": "/home-bg/home-bg-bottom-1.webp",
    "class": "home-bg-bottom-1",
    "sizes": "xs:100px sm:164px md:148px lg:225px xl:180px",
    "key": "home-bg-bottom-1"
  },
  {
    "src": "/home-bg/home-bg-bottom-2.webp",
    "class": "home-bg-bottom-2",
    "sizes": "xs:70px sm:94px md:94px lg:110px xl:110px",
    "key": "home-bg-bottom-2"
  },
  {
    "src": "/home-bg/home-bg-bottom-3.webp",
    "class": "home-bg-bottom-3",
    "sizes": "xs:131px sm:179px md:163px lg:179px xl:227px",
    "key": "home-bg-bottom-3"
  }
]

So what exactly does my nuxt config want me to put, for it to work on vercel? thx!!
Nuxt Image
Vercel - Nuxt Image Providers
Optimize images at Vercel's Edge Network.
Was this page helpful?