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)
So what exactly does my nuxt config want me to put, for it to work on vercel? thx!!7 Replies
Hi @kb. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
To use NuxtImg with Vercel, you need to specify all the custom widths used in your application in the
nuxt.config.js file. Based on the information you provided and the Vercel provider documentation for Nuxt Image, here's what you should add to your nuxt.config.js:
This configuration includes all the unique width values from the sizes properties in your image data. Here's why this is necessary:
1. Vercel requires you to explicitly list all the widths used in your app for proper image resizing as mentioned in the Vercel provider documentation (https://image.nuxt.com/providers/vercel#sizes).
2. The sizes you've provided use the format xs:56px sm:104px md:88px lg:120px xl:136px, which corresponds to different screen sizes. Vercel needs the actual pixel values.
3. I've extracted all unique pixel values from your sizes data and included them in the sizes array.
4. This configuration tells Vercel which image widths to prepare, ensuring that all your responsive image sizes are properly handled.
Remember that if you use any other custom widths elsewhere in your application, you should add those to this array as well.
Also, keep in mind that Vercel will use the next larger width if an exact match isn't found in this list. So, you might be able to optimize this list by removing some values if you're comfortable with slight rounding up of image sizes.
Lastly, ensure that your images are placed in the public/ directory of your Nuxt project, as that's where the default provider expects to find them according to the documentation (https://image.nuxt.com/get-started/providers#local-images).
With this configuration, your NuxtImg components should work correctly when deployed to Vercel.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@310160452221140996> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
my images are in public/home-bg/ is that ok @kapa.ai
Let me check the knowledge base for you again. One moment! :books:
----------------------
Yes, placing your images in the
public/home-bg/ directory is perfectly fine. The public/ directory in Nuxt is used to serve static assets, and any subdirectory within it will work as expected.
According to the Nuxt documentation on the public directory (https://nuxt.com/docs/guide/directory-structure/public), files in the public/ directory are served at the root of your website and are not modified by the build process. This means your images in public/home-bg/ will be accessible and can be used with NuxtImg.
For example, if you have an image at public/home-bg/image.webp, you can reference it in your NuxtImg component like this:
The path in the src attribute starts with a forward slash because it's relative to the root of your website, not the public directory itself.
This approach is consistent with how you're already referencing your images in the data you provided earlier, where you have paths like /home-bg/home-bg-top-1.webp. These paths correctly point to the images in your public/home-bg/ directory.
So, to answer your question directly: yes, having your images in public/home-bg/ is perfectly okay and will work well with NuxtImg and Vercel deployment.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@310160452221140996> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
it did not work. I have this deploying to a non vercel environment too, which works as expected. here is the smallest one at 66px and then the same one on vercel simply doing the opposite
every doc says something different. this cannot be what i need to do surely