Options

To configure the image module and customize its behavior, you can use the image property in your nuxt.config.js:

nuxt.config.js
export default {
  image: {
    // Options
  }
}

providers

Providers are an integration between the image module and images service providers like cloudinary. Using a specific provider means that your images are being transformed by the specific service. There are plenty of image service providers. Currently we are supporting some providers out of box.

To use any provider, list them inside nuxt.config.js. You can use internal providers or create a custom provider. Here is a sample to use cloudinary:

nuxt.config.js
export default {
  image: {
    providers: {
      cloudinary: {
        baseURL: 'https://res.cloudinary.com/nuxt/image/upload/'
      }
    }
  }
}
index.vue
<template>
  <nuxt-image src="cloudinary:/remote/nuxt-org/blog/going-full-static/main.png" width="300" height="169" />
</template>
main

See:

presets

Presets are collections of pre-defined configurations for your projects. Presets will help you to unify images all over your project.

nuxt.config.js
export default {
  image: {
    presets: [
      {
        name: 'avatar',
        modifiers: {
          format: 'jpg',
          width: 50,
          height: 50
        }
      }
    ]
  }
}
index.vue
<template>
  <nuxt-image legacy src="+avatar:/nuxt-icon.png" />
</template>
nuxt-icon

See:

defaultProvider

If you want to use multiple providers in your project, you should pick one of them as the default provider. If you do not set defaultProvider, your first provider is picked as default.

nuxt.config.js
export default {
  image: {
    defaultProvider: 'twicpics',
    providers: {
      local: {},
      twicpics: {
        baseURL: 'https://i5acur1u.twic.pics/'
      }
    }
  }
}