get-started

Installation

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

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

Add @nuxt/image@rc dependency to your project:

pnpm
pnpm add @nuxt/image@rc

Add it to modules in your nuxt.config:

nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    '@nuxt/image',
  ]
})

You can now start using <NuxtImg> and <NuxtPicture> 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:

pnpm
pnpm up @nuxt/image@rc
  • 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.

Configuration

Nuxt Image is configured with sensible defaults.