Getting Started

Using image module in your Nuxt project is only one command away. ✨

You are reading the v1 documentation compatible with Nuxt 3 (experimental). Check out image.nuxtjs.org for Nuxt 2 compatible version. (Announcement).

Add @nuxt/image-edge as a development dependency to your project:

yarn
yarn add --dev @nuxt/image-edge
npm
npm install -D @nuxt/image-edge

Add the module to modules in your nuxt.config:

nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    '@nuxt/image-edge',
  ]
})
You can now start using <nuxt-img> and <nuxt-picture> components in your Nuxt app ✨

Configuration

Add an image section in your nuxt.config:

nuxt.config.ts
image: {
  // Options
}

See the image configuration for all available options and features to customize.

Troubleshooting

If an error occurs during installation:

yarn
yarn upgrade @nuxt/image-edge
npm
npm up @nuxt/image-edge
  • Try recreating lock-file:
npx nuxt@latest upgrade --force
  • If there is still an error related to sharp and node-gyp, it is is probably becase your OS architecture or NodeJS version is not included in pre-built binaries and needs to built from source (for example, this sometimes occurs on Apple M1). Checkout node-gyp for install requirements.
  • If none of the above worked, please open an issue and include error trace, OS, Node version and the package manager used for installing.