Providers

Gumlet

Nuxt Image has first class integration with Gumlet.

Integration between Gumlet and the image module.

To use this provider you just need to specify the base url of your service in Gumlet.

nuxt.config.ts
export default defineNuxtConfig({
  image: {
    gumlet: {
      baseURL: 'https://demo.gumlet.io'
    }
  }
})

gumlet mode values

Gumlet supports all the the standard values for fit property of Nuxt image and Nuxt picture.

gumlet modifiers

Beside the standard modifiers, you can also pass all gumlet-specific render API parameters to the modifiers prop.

For a full list of these modifiers and their uses, check out Gumlet's image Rendering API documentation.

gumlet best practices

Some common best practices when using Gumlet, would be to include our format=auto parameter, which will automatically apply the best format for an image and compress the image as well. Combine this with some top of intelligent cropping and resizing and you will have a great image!

<NuxtImg
  provider="gumlet"
  src="/sea.jpeg"
  width="300"
  height="500"
  fit="cover"
  :modifiers="{ format: 'auto', compress: 'true' }"
/>

This will return a 300 x 500 image, which has been compressed, will display next-gen formats for a browser, and has been cropped intelligently to the face of the woman in the hat.