Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
86 changes: 67 additions & 19 deletions docs/content/1.get-started/1.installation.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ npx nuxt module add image
Add `@nuxt/image` dependency to your project:

::code-group

```bash [npm]
npm i @nuxt/image
```
Expand All @@ -35,6 +36,7 @@ pnpm add @nuxt/image
```bash [bun]
bun add @nuxt/image
```

::

Then, add it to the `modules` in your `nuxt.config`:
Expand All @@ -47,6 +49,51 @@ export default defineNuxtConfig({
})
```

## Sharp Cross-Platform Installation

The default [IPX](/providers/ipx) provider uses [sharp](https://sharp.pixelplumbing.com) for image processing. At install time, your package manager downloads prebuilt sharp binaries **only for your current OS and CPU architecture**. This means if you build on macOS or Windows and deploy to a Linux server (or build on x64 and deploy to ARM64), the required sharp binaries might be missing, resulting in errors like:

```
[500] [IPX_ERROR] Could not load the "sharp" module using the linux-x64 runtime
```

To fix this, configure your package manager to install sharp binaries for **all target platforms**, e.g.:

::code-group

```json [pnpm (package.json)]
{
"pnpm": {
"supportedArchitectures": {
"os": ["current", "linux"],
"cpu": ["current", "x64", "arm64"]
}
}
}
```

```yaml [yarn (.yarnrc.yml, v3+ only)]
supportedArchitectures:
os:
- current
- linux
cpu:
- current
- x64
- arm64
```

```bash [npm]
npm install --cpu=x64 --os=linux sharp
npm install --cpu=arm64 --os=linux sharp
```

::

After updating the configuration, reinstall dependencies to download the additional platform binaries.

For more details, see the [sharp cross-platform documentation](https://sharp.pixelplumbing.com/install/#cross-platform).

## Configuration

Add an `image` section in your `nuxt.config`:
Expand Down Expand Up @@ -108,33 +155,34 @@ If an error occurs during installation:
- Ensure using LTS version of NodeJS ([NodeJS Download page](https://nodejs.org/en/download))
- Try to upgrade to latest versions:

::div
:::code-group
```bash [npm]
npm up @nuxt/image
```
```bash [yarn]
yarn upgrade @nuxt/image
```
```bash [pnpm]
pnpm up @nuxt/image
```
```bash [bun]
bun update @nuxt/image
```
:::
::code-group

```bash [npm]
npm up @nuxt/image
```

```bash [yarn]
yarn upgrade @nuxt/image
```

```bash [pnpm]
pnpm up @nuxt/image
```

```bash [bun]
bun update @nuxt/image
```

::

- Try recreating lockfile:

::div

```bash
npx nuxt upgrade --force
```

::

- If there is still an error related to `sharp` and `node-gyp`, it is probably because your OS architecture or NodeJS version is not included in pre-built binaries and needs to be built from source (for example, this sometimes occurs on Apple M1). Checkout [node-gyp](https://github.com/nodejs/node-gyp#installation) for install requirements.
- If none of the above worked, please [open an issue](https://github.com/nuxt/image/issues) and include error trace, OS, Node version and the package manager used for installing.
Loading