get started
Installation
Using image module in your Nuxt project is only one command away.
You are reading the
Checkout v0.image.nuxtjs.org for Nuxt 2 compatible version. (Announcement).
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@rcAdd 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:
- Ensure using LTS version of NodeJS (NodeJS Download page)
- Try to upgrade to latest versions:
pnpm
pnpm up @nuxt/image@rc- Try recreating lock-file:
npx nuxt@latest upgrade --force- If there is still an error related to
sharpandnode-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.