sizes and placeholder attribute do not work in preset from nuxt.config.ts

It might also be me, but I found no documentation on how to configure sizes and placeholder in the docs.

It did not work, but
I expected to be able to use a preset to configure the params for a NuxtImage:

export default defineNuxtConfig({
  modules: [
    ["@nuxt/image", {
      quality: 60,
      format: ['webp'],
      
      presets: {
        hero: {
          sizes: {sm:'50vw', md:'100vw', lg:'150vw', xl:'400vw'},
          placeholder: true,
          
          modifiers: { // passed into the URI
            quality: 70
          }
        }
      }
    }],
  ]
});

same here, format, alias is also not working from nuxt.config.ts , however format works directly using prop!

image: {
    quality: 80,
    format: ['avif', 'webp'],
    domains: ['example.org'],
    alias: {
      example: 'https://example.org'
    }
}

It looks like issue #734 already exists asking about support for sizes in presets and whether it's a documentation issue or if it's not currently supported (and thus a feature request).

Perhaps this could be merged into the existing issue with the addition of the question around placeholder in the same context?

Since this seems like a "won't fix" issue ...
I coded a solution for myself that wraps NuxtImg to make it configurable from the nuxt.config.ts with all options.

Have a look

Would you be able to provide a reproduction? 🙏

More info

Why do I need to provide a reproduction?

Reproductions make it possible for us to triage and fix issues quickly with a relatively small team. It helps us discover the source of the problem, and also can reveal assumptions you or we might be making.

What will happen?

If you've provided a reproduction, we'll remove the label and try to reproduce the issue. If we can, we'll mark it as a bug and prioritise it based on its severity and how many people we think it might affect.

If needs reproduction labeled issues don't receive any substantial activity (e.g., new comments featuring a reproduction link), we'll close them. That's not because we don't care! At any point, feel free to comment with a reproduction and we'll reopen it.

How can I create a reproduction?

We have a template for starting with a minimal reproduction:

👉 https://stackblitz.com/github/nuxt/image/tree/main/example

A public GitHub repository is also perfect. 👌

Please ensure that the reproduction is as minimal as possible. See more details in our guide.

You might also find these other articles interesting and/or helpful:

This issue was closed because it was open for 7 days without a reproduction.

Navigation Menu

Repository navigation

`sizes` and `placeholder` attribute do not work in `preset` from `nuxt.config.ts` #1256

Why do I need to provide a reproduction?

What will happen?

How can I create a reproduction?

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

sizes and placeholder attribute do not work in preset from nuxt.config.ts #1256

Description

Activity

geminigeek commented on Feb 19, 2024

joshualyon commented on Jun 25, 2024

BananaAcid commented on Jun 26, 2024

github-actions commented on Jul 28, 2026

Why do I need to provide a reproduction?

What will happen?

How can I create a reproduction?

github-actions commented on Aug 5, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

`sizes` and `placeholder` attribute do not work in `preset` from `nuxt.config.ts` #1256