Nuxt 3 Support

[pi0]

Nuxt 3 experimental support for image Module started in v1 branch and documentation is available on v1.image.nuxtjs.org.

In order to use the image module for Nuxt 3, you have to install @nuxt/image-edge. Releases are automated with each commit so it is advised to lock the version and regularly check the changes.

Nuxt 2 will be supported in v0 branch in the meantime.

This discussion will be used to track the progress roadmap and collect feedbacks.

Roadmap

• Working rewrite and edge releases
• Migrate components to composition API
• Support useImage() replacing $img
• Support static generation via nitro prerendering
• Codesandbox broken (need force upgrade)
• Support Nuxt base URL for IPX provider: fix(ipx): support runtime nuxt baseURL  #778
• Vercel provider broken: feat: add vercel-static and netlify-static presets nitrojs/nitro#1073
• Automatically disable IPX provider for non-NodeJS niro providers
• Add event listeners back to the components
• Use Nitro's storage API for production
• Use Nitro caching for image meta utils
• Detect early issues and bugs

How to help:

• Try module on your Nuxt 3 project
• Share feedback about missing features and possible regressions not listed above
• Make pull request to fix (unassigned) items above

[everyx]

This is really good news, hope imgproxy provider will be supported in new version.

Related:

• Add support provider "imgproxy" #378
• feat(provider): imgproxy #385

[pi0]

Good point! Surely now that we have a stable server layer we can work on server-side URL signing (#276), making it possible to support providers such as imgproxy and imgx.

[JenuelDev]

so excited for the stable release

[Baroshem]

Awesome work @pi0 !

Can I help with some of the points? These seems like a good fit for me :)

1. Support Nuxt base URL for IPX provider
2. Migrate components to composition API
3. Add event listeners back to the components

[pi0]

Surely!! Feel free to open a pull request for unassigned items.

[Baroshem]

Awesome, I will take a look at this first -> Support Nuxt base URL for IPX provider

[Mokkapps]

Finally 💚 Thanks for your effort, @pi0!

It works fine for my application where I use Cloudinary as image provider but I'm still waiting for the static generation.

[Mokkapps]

@dosstx couldn't find anything about placeholders in the new docs.

@pi0 are placeholders for nuxt-img already supported in the new version?

[dosstx]

@Mokkapps -- If you change your gravity modifier to auto, does it work? When I change it to auto I get an error. Wondering if you could test.

[Mokkapps]

@dosstx it works without an error with "@nuxt/image-edge": "^1.0.0-27657146.da85542" and Nuxt rc8

[dosstx]

@dosstx it works without an error with "@nuxt/image-edge": "^1.0.0-27657146.da85542" and Nuxt rc8

I have the same setup as you (same RC and image edge version) and I get a broken image when I do this in nuxt.config.ts:

postSideBarImage: {
            modifiers: {
                dpr: 'auto',
                quality: 'auto:best',
                gravity: 'center' //<----it ONLY works if I use 'center'. If I put 'auto', it breaks image. 
            }
        },

I'll try to see if I can do a reproduction when I get time. thanks

[jimhlad]

Any thoughts on when we might see static generation?

Really love this package and what it offers, and that is definitely one of the coolest features. Great work being done here @pi0 !

[alejogamboa]

awesome work @pi0!! keep going. It works like a charm locally but fail when I deployed to Vercel:

[log] Nuxt CLI v3.0.0-rc.4

23:29:22.174 | [error] fse.writeJson is not a function
23:29:22.174 | at Object.vercel [as setup] (node_modules/@nuxt/image-edge/dist/module.mjs:71:15)
23:29:22.174 | at async setup (node_modules/@nuxt/image-edge/dist/module.mjs:172:9)
23:29:22.174 | at async Object.normalizedModule (node_modules/@nuxt/kit/dist/index.mjs:582:5)
23:29:22.174 | at async installModule (node_modules/@nuxt/kit/dist/index.mjs:398:3)
23:29:22.174 | at async initNuxt (node_modules/nuxt/dist/index.mjs:1334:7)
23:29:22.174 | at async loadNuxt (node_modules/nuxt/dist/index.mjs:1361:5)
23:29:22.175 | at async loadNuxt (node_modules/@nuxt/kit/dist/index.mjs:662:19)
23:29:22.175 | at async Object.invoke (node_modules/nuxi/dist/chunks/build.mjs:29:18)
23:29:22.175 | at async _main (node_modules/nuxi/dist/cli.mjs:46:20)
23:29:22.195 | error Command failed with exit code 1.
23:29:22.195 | info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
23:29:22.214 | Error! Command "yarn run build" exited with 1
23:29:22.314 | Error: Command "vercel build" exited with 1

[pi0]

Should be fixed with the last edge release (23076b8) Only please note vercel image provider seems broken likely due to output configuration changes.

[alejogamboa]

Hello again @pi0:

It deploys now but when I visit the website every image gives 404 error on the browser console. When I log in Vercel console and search for the logs I found nothing in the build phase but in the runtime logos it gives this error:

[GET] /_vercel/image?url=/carrusel/imagen2.webp&w=1024&q=100
16:36:30:19
Function Status: 404
Edge Status: 404
Duration: 9.94 ms

This cloud be due to this? "Only please note vercel image provider seems broken likely due to output configuration changes"

Thanks in advance for your help

[productdevbook]

IPX Error: Error: \nSomething went wrong installing the "sharp" module\n\nCannot find module '../build/Release/sharp-linuxmusl-x64.node'\nRequire stack:\n- /home/node/app/.output/server/node_modules/sharp/lib/sharp.js\n- /home/node/app/.output/server/node_modules/sharp/lib/constructor.js\n- /home/node/app/.output/server/node_modules/sharp/lib/index.js\n\nPossible solutions:\n- Install with verbose logging and look for errors: "npm install --ignore-scripts=false --foreground-scripts --verbose sharp"\n- Install for the current linuxmusl-x64 runtime: "npm install --platform=linuxmusl --arch=x64 sharp"\n- Consult the installation documentation: https://sharp.pixelplumbing.com/install

local working but wail when i deploy server

[pi0]

Have you installed the necessary sharp dependencies in your prod environment?

[productdevbook]

no, but now pnpm with install but some problem

[pi0]

Something i can guess from stack you shared, is it by any chance a multi-step docker build or build and deploy platform different architectures? Error says it doesn't have dependency for libmusl (which is used by alpine)

[ffoerster]

Thanks for your hard work!

I tried to add the module to one of my current projects, but i am getting this loading error with Nuxt3 RC4 in a yarn workspaces monorepo environment - not sure if this is a user error or a bug tho.

ERROR Cannot start nuxt: Cannot find module './runtime/providers/ipx'

[pi0]

Are you only installing @nuxt/image-edge in monorepo? A reproduction would be helpful to investigate 🙏 (DM me in Discord please if cannot share)

[ffoerster]

I think something was mixed up in my node_modules. While i was preparing a repro, i did a quick delete/reinstall my node_modules and it worked 🤷. sorry for the hassle

[joachimhviid]

I'm running into the above issue with Nuxt 3 RC8 in a NX monorepo. Tried deleting and reinstalling was suggested with no luck unfortunately.

[elwynelwyn]

I'm getting the same, can temporarily get past the error by manually adding a .mjs extension to the require.resolve call

node_modules/@nuxt/image-edge/dist/module.mjs:108

const extraExtensionManuallyAddedHere = '.mjs';
input.provider = BuiltInProviders.includes(input.provider) ? require.resolve("./runtime/providers/" + input.provider + extraExtensionManuallyAddedHere) : await resolvePath(input.provider);

Nuxt3 RC8 not inside a monorepo/workspace, using Vite for building

[MarioC3]

I'm having the same problem here. Have you guys found a solution for this?

[suraj740]

This /f_webp,q_auto,w_640,c_fit/ is getting prepended before cloudinary image url , due to which image is not loading.

[r-token]

Similar to @alejogamboa, it's working great locally - but I'm getting 500 errors in the browser after deploying to Netlify. All of them say the same thing:

[Error] Failed to load resource: the server responded with a status of 500 ()

It's trying to access the images at https://{domain-name}/_ipx/_/{public-path-to-image-file}

I'm on [email protected]

[pi0]

Can you please check function invocation logs in netlify? 🙏

[r-token]

Hi @pi0, yes - here's what's being output:

Jul 18, 09:17:55 AM: bac50880 ERROR  [nuxt] [request error] Invalid URL
  at new NodeError (node:internal/errors:372:5)  
  at URL.onParseError (node:internal/url:553:9)  
  at new URL (node:internal/url:629:5)  
  at ./.netlify/functions-internal/server/server.js:282168:50  
  at resolveHandler (./.netlify/functions-internal/server/server.js:6690:34)  
  at ./.netlify/functions-internal/server/server.js:6705:12  
  at Object.handler (./.netlify/functions-internal/server/server.js:6884:12)  
  at ./.netlify/functions-internal/server/server.js:6797:31  
  at async nodeHandler (./.netlify/functions-internal/server/server.js:6747:7)  
  at async Runtime.handler2 [as handler] (./.netlify/functions-internal/server/server.js:283565:18)

[hacknug]

I'm seeing the same error when trying to optimize remote images from an API. I added the domain to domains but it only results in broken images like @r-token mentioned. Explicitly adding provider: 'ipx' did nothing. Does anyone have an example repo with this working? Might be hwlpful to pindown the issue.

[paulvonber]

Anyone found a way to run over this problem?

[Daedra22]

Got the same problem, therefore nuxt3 img is not usable in production :(

[shagent007]

when i deploy my nuxt 3 project to server i see that all image src like "/_ipx/...." but when i generate project nuxt does not create _ipx folder with images and all images in site 404. Please help me

[scherii]

Hi @moshetanzer 👋

Check if the sharp binary on Azure aligns with your platform’s needs.

See the installation guide for details: Sharp Installation.

Building your app on macOS and syncing it to a Linux server could for example cause sharp library compatibility issues. If the issue is different, providing more information or a reproduction repository would help in diagnosing the problem.

Good luck!

[moshetanzer]

Hi @scherii

Very straightforward. Ssr is true. Deploying to azure using the official deployment with GitHub actions.
When I acces the files directly example.com/omage.png it is there. However when using in nuxt image or trying with the ipx, it return 404.

Thanks a lot.

[dosstx]

Check that the urls are encoded properly

[moshetanzer]

All is encoded properly. It is literally /hero-image.png.

Pretty sure this is a bug.

[moshetanzer]

Works perfectly in dev also. Meant to add.

[shagent007]

Hello @pi0 help me please i have 1 question. Can I use @nuxt/image-edge in server. If possible, can you show me an example of how to set everything up so that everything works on the server

[scherii]

Hi @shagent007
There is a Getting Started guide. Install the module, add it to your Nuxt Config in nuxt.config.{js|ts} and use Server Side Rendering for Nuxt 3 (which is the default). Is there a particular step that you have difficulty with?

[RobbieTheWagner]

How close is support for static sites? I'm able to get things working with nuxi dev but nuxi generate does not seem to work and does not generate an _ipx folder in .output that I can see, so all the images 404.

[RobbieTheWagner]

I know it is not implemented, but I do not understand why it does not work. If we are generating the images and storing them, it seems all we would need is to get the paths correct to them.

[scherii]

@rwwagner90 Possibly I don't quite understand what you are getting at. In that case, could you elaborate?

In @pi0's announcement (at the very top) there is a roadmap and it says "Support static generation via nitro prerendering", which is not yet implemented. While it works in dev mode and server environments, it does not yet generate/save images for static rendering.

[RobbieTheWagner]

@scherii what I am saying is if it works in dev and server environments, then it is generating images, correct? It seems to me, all we would need to do is save those images and get the paths to them for this to work?

[scherii]

As far as I understand it, this is related to Nuxt's new Nitro engine. It sounds simple to just save the images, however the work is a bit more complex and requires rewrites of certain areas. Probably not a big undertaking either, but I suspect @pi0 has many other things on his plate. Good things take time. I'd like to do my part, but I'm not yet up to speed on Typescript.

[Daedra22]

Yes but this means, nuxt 3 image is not working for production at all ...

[kstraszewski]

Hi, I would like to ask is this desired behavior?
I want a responsive img but also want to add width and height coz lighthouse is yelling. I've found in nuxt-img docs that:
Use original image width/height for responsive images (when using sizes)
but when I do all responsiveness disappear 😦

Here is an example: https://stackblitz.com/edit/github-zyl8cm?file=app.vue

When you remove height and width responsiveness works great!

Or maybe Pagespeed and Lighthouse are lying to me and when I use sizes I do not need to use height and width If so can you point it out in the docs?

[hacknug]

The reson you should use width and height with images, is to hint the browsers the aspect ratio of the element once the file is loaded and rendered. This will prevent layout shifts and improve your site's UX since there will be less jumpy elements on screen at load time.

Can't answer for the module behaviour atm, though.

[kstraszewski]

Ok, so these kinds of tips are useless if I use sizes?

If so this line here may misslead:
Use original image width/height for responsive images (when using [sizes](https://v1.image.nuxtjs.org/components/nuxt-img#sizes))

[hacknug]

I'm actually not sure but I'm inclined to think the answer is no. The spec doesn't seem to mention it so I'd assume browsers only use width and height for this.

I'm guessing your question comes from the fact you can have different image sources with different intrinsic aspect ratios when using sizes and srcset. In that case it wouldn't make sense to be able to specify only the aspect ratio of one of them since it would only prevent layout shifting in one of those rendered breakpoints (assuming we're dealing with an extreme case that uses completely different aspect ratios for each of them).

The following line from the spec makes it clear that you should always specify these even if you're using CSS to set the size of your images:

Developers are encouraged to specify an intrinsic aspect ratio via width and height attributes on lazy loaded images, even if CSS sets the image's width and height properties, to prevent the page layout from shifting around after the image loads.

Given images will sometimes use the same aspect ratio across breakpoints, I would go for setting both width and height to the image file instrinsic values (unless you're cropping, in that case I'd use the values used for this, perhaps for the biggest size you'll crop them to). This should make lighthouse happy most of the time and leave you only with one unanswered question lol

[danvega]

Any plans to support a blurred image until the image is visible? I'm coming from Gridsome and this is something g-image does that I really love.

A base64 blurred image loaded by default. This makes: 1) Larger images outside the viewport are not requested until they’re needed, and 2) The blurred image is in a container with the same dimensions as the real image—therefore, no jumping when the image loads.

An Intersection Observer that swaps the base image for the larger image, when the image is in the viewport. (Lazy loading).

[Mokkapps]

That would be so awesome, Gatsby also provides a similar functionality!

[scherii]

• Gatsby uses blurhash (via https://github.com/m5r/gatsby-transformer-blurhash)
• Based on this, I'd say Gridsome does, too

I think Plaiceholder could be a great place to start.

[Strift]

I know some of the providers supported by Nuxt Image have such a feature (eg. output=preview with twicpics provider.)

It would be great if Nuxt Image had a placeholder API configurable at the provider level. That would allow to get it out-of-the-box for providers that support it or implement custom ones with any other solutions (like suggested above.)

[JohnGallego]

Would love to also see support for different DPI/retina screens as part of the roadmap for nuxt3 support. I think some efforts were made in the past, but nothing came to fruition.

[rizypb]

@pi0 I am getting 404 error for all images after static deployment in AWS S3 bucket. Can you please help me to understand this issue related to nuxt-img:
All my images are located inside assets/images folder. Some are inside subfolders too.
So I have added this to my nuxt.config.ts file:

  image: {
    dir: 'assets/images'
  },

The error is 404 (Not Found)
The deployed link is trying to access the /assets folder which doesn't exist in the static build.

[JohnGallego]

According to the docs, you need to place your images under the static folder.

[scherii]

• Support static generation via nitro prerendering

→ #548 (reply in thread)

[Daedra22]

This causes nuxt img to not work at all for production, this is a major bug.

[Brewal]

@Daedra22 how can this even be a bug since it's still under development ? That's what the edge channel is made for... Just wait if you really want this feature.
And still, you can use SSR in production if you want, or use Nuxt 2.

[Birleyici]

@Daedra22 how can this even be a bug since it's still under development ? That's what the edge channel is made for... Just wait if you really want this feature. And still, you can use SSR in production if you want, or use Nuxt 2.

What exactly is your purpose in using ssr in production? I am using nuxt 3 universal mod. It works locally for me. but it doesn't work in production(vercel).

[KareemDa]

It seems like v1 is not working with nuxt 3.0.-rc.11
I'm getting this error when trying to install

  EPERM: operation not permitted, rename 'D:\projects\ST Mum\frontend\node_modules\nitropack' -> 'D:\projects\ST Mum\frontend\node_modules.ignored_nitropack'

[KareemDa]

Resolved after deleting node_modules & lock file, then making a fresh install

[Triloworld]

Working workaround for Cloudflare and current implementation:
File: _redirects
Content:

/_ipx/w_320,f_webp/* /:splat
/_ipx/w_640,f_webp/* /:splat
/_ipx/w_768,f_webp/* /:splat
/_ipx/w_1024,f_webp/* /:splat
/_ipx/w_1280,f_webp/* /:splat
/_ipx/w_1536,f_webp/* /:splat
/_ipx/w_320,f_png/* /:splat
/_ipx/w_640,f_png/* /:splat
/_ipx/w_768,f_png/* /:splat
/_ipx/w_1024,f_png/* /:splat
/_ipx/w_1280,f_png/* /:splat
/_ipx/w_1536,f_png/* /:splat
/_ipx/w_320,f_jpeg/* /:splat
/_ipx/w_640,f_jpeg/* /:splat
/_ipx/w_768,f_jpeg/* /:splat
/_ipx/w_1024,f_jpeg/* /:splat
/_ipx/w_1280,f_jpeg/* /:splat
/_ipx/w_1536,f_jpeg/* /:splat

Add more extension if used.
Right now original image is copied but engine isn't working. In that case to build solution along with module you can use original one. After upgrading remove it and then check if images working correct.
This solution is only good on development stage.
Big thx for @pi0 that enable half of it to encourage adoption 👍

[MattFaz]

That works great! Thank you @Triloworld

[Ischafak]

@Mattyfaz hi, can you explain what you did to solve this issue?
i didnt understand what should i do

[MattFaz]

@Ischafak if your using cloudflare pages to host your static site you will notice your site on Cloudflare will look for images in a /_ipx/ directory. This is essentially replacing that directory.

As an example lets say when your site is on Cloudflare pages you inspect your image and it says it's trying to get them from a URL that contains /_ipx/w_480/.
In that case you would create a file in the root of your website called _redirects and add the following to it:

/_ipx/w_480/* /:splat

[xaja]

can't read v1 docs https://v1.image.nuxtjs.org/get-started/
500 error

[ricky11]

works now.

[xaja]

yes, it worked for some days, but now again 500 😅

[shtief]

Are there any plans when the implementation will continue? I desperately need the static generation support.

[ricky11]

I have now switched to hosting images on Cloudinary and using their API to manipulate images and totally removed nuxt image as a dependency.. i may come back in the future, but if you have a lot of images I would suggest using hosted solutions.

[Brewal]

As an alternative, I use Cloudinary too, but as a provider for nuxt/image and it works well.

[dosstx]

I suggest imagekit.io over Cloudinary as the imagekit docs and GUI are 100% better. Also, I found imagekit.io slightly faster than Cloudinary and their support is top-notch and pricing is cheaper (more bang for buck). Easily able to use with server API,too.

[n4an]

Not work with SSG
GET http://localhost:3000/_ipx/_/img/image.png 404 (Not Found)

[ricky11]

ssg support is coming soon if you see release notes.

also can't access your localhost 😆

[jimhlad]

There is a PR #614 in the works but haven't heard anything back regarding timing.

[FileSoft-us]

nodejs v19

error @nuxt/[email protected]: The engine "node" is incompatible with this module. Expected version "^14.16.0 || ^16.11.0 || ^17.0.0 || ^18.0.0". Got "19.0.1"

[genu]

just downgrade your node version

[shtief]

will this plugin also be finalized for the nuxt 3 stable release on wednesday? Especially the static generation.

[palachX]

Guys, I understand that ipx generation is not supported yet?

[Brewal]

Yes.

[websorokinweb]

I am hope that "Support static generation via nitro prerendering" will be soon

[8utterMaker]

@pi0 is there a visible ETA for the static generation support? Keep up the good work and thanks for everything = )

[shtief]

I will take a look at Astro now ;-)

[ikluhsman]

I just dropped in @nuxt/image-edge in place of @nuxt/image when migrating a project from Nuxt 2 to Nuxt 3. It worked flawlessly, so far as I can tell. I have not gotten into testing different transforms, effects, etc but I assume these API calls are similar to the old way. My content provider is ImgIx. I will report back here with any errors or issues I find.

Thank you @pi0 and everyone here for the hard work on this module!

[xxx44552]

I can use images from assets/images? Work only in dev mode. After build - 404

[RichAyotte]

It hasn't been implemented yet according to the current description of this post. I'm using 1.0.0-27991759.1a5eea1 and I'm still seeing 404s for all my images.

Use this version: "@nuxt/image-edge": "1.0.0-27913696.5d122a3"

That's an older version. Has there been a regression?

[xxx44552]

It hasn't been implemented yet according to the current description of this post. I'm using 1.0.0-27991759.1a5eea1 and I'm still seeing 404s for all my images.

Use this version: "@nuxt/image-edge": "1.0.0-27913696.5d122a3"

Why not last version?

[RichAyotte]

@sewalsh same problem with @nuxt/image-edge": "1.0.0-27913696.5d122a3

The generated HTML has references to images such as /_ipx/_/batkz-tezzomboiz-transparent.webp but the _ipx folder isn't even created.

[RichAyotte]

Is this suppose to be working?

[sewalsh]

@sewalsh same problem with @nuxt/image-edge": "1.0.0-27913696.5d122a3

The generated HTML has references to images such as /_ipx/_/batkz-tezzomboiz-transparent.webp but the _ipx folder isn't even created.

Apologies, my bad! I just checked and I'm serving images from /public and not /assets, /assets is currently broken on production builds.

[JustSanya]

I see that support for static generation is marked as done, however it doesn't work for me on ^1.0.0-28020728.5df24eb, am I missing something, or is it not done yet, in the end?

I have not configured the module explicitly in any way in the nuxt config, and images are located in the /public folder

[RichAyotte]

Do you have ssr: true in your config?

[FabianRzepka]

I have the same, tested with several settings.
Images are located in /public/images ^1.0.0-28020728.5df24eb.
After generate folder is not created.

[benmneb]

nuxt-img currently works for me for full static site generation except when I have the image source passed in as props and render it as a background-image using useImage(). It kind of works in dev (images are shown, but always all full resolution of the raw image) but not at all once generated. I am using the default ipx provider with images hosted locally in public folder and all webp format.

package.json

"devDependencies": {
  "@nuxt/image-edge": "^1.0.0-28004510.a0dc8e8",
  "nuxt": "^3.3.2"
}

script

const $img = useImage()
const imgUrl = $img(props.image, 'sm:100vw md:100vw lg:100vw xl:100vw')

template

<div :style="`background-image: url('${imgUrl}')`" />

parent component

<travel-log-section v-for="place in travelLogData" v-bind="place" />

nuxt.config.ts

modules: ['@nuxt/image-edge'],
image: {
  dir: 'public/images',
  screens: {
    sm: 640,
    md: 1024,
    lg: 1920,
    xl: 2280,
  },
},

After running yarn generate && yarn preview all the other images (using nuxt-img but not as a background-image) work, but these ones all return 404.

 HTTP  4/23/2023 12:14:37 PM 127.0.0.1 GET /_ipx/_/travel-log/skopje.webp
 HTTP  4/23/2023 12:14:37 PM 127.0.0.1 Returned 404 in 2 ms
 HTTP  4/23/2023 12:14:37 PM 127.0.0.1 GET /_ipx/_/travel-log/ohrid.webp
 HTTP  4/23/2023 12:14:37 PM 127.0.0.1 Returned 404 in 2 ms

The nuxt-img site says "Static Image support is under progress for Nuxt 3", but is that really the problem (because support for both static generation and useImage are marked as done in this discussion), or am I doing something wrong that's causing the crawler not to get to these images?

You can see the source code in question here, and the broken production deploy here.

(repost from SO)

[andreyquerino]

I'm looking forward to working on static generation.

Meanwhile I'm doing it manually, generating the images on the local server and saving the files in my images folder.