IPX

Nuxt Image comes with a preconfigured instance of ipx. An open source, self-hosted image optimizer based on sharp.

Using ipx in production

Use IPX for self-hosting as an alternative to use service providers for production.

Runtime Module

Just add @nuxt/image to modules (instead of buildModules) in nuxt.config. This will ensure that the /_ipx endpoint continues to work in production.

Advanced: Custom ServerMiddleware

If you have a use case of a custom IPX instance serving other that static/ dir, you may instead create a server Middleware that handles the /_ipx endpoint:

1. Add ipx as a dependency:

yarn add ipx

npm install ipx

2. Create server/middleware/ipx.js:

import { createIPX, createIPXMiddleware } from 'ipx'// https://github.com/unjs/ipxconst ipx = createIPX({  dir: '', // absolute path to images dir  domains: [], // allowed external domains (should match domains option in nuxt.config)  alias: {}, // base alias  sharp: {}, // sharp options})export default createIPXMiddleware(ipx)

3. Add /_ipx to serverMiddleware:

export default {  serverMiddleware: {    '/_ipx': '~/server/middleware/ipx.js'  }}

Additional Modifiers

You can use additional modifiers supported by IPX.

Example:

<nuxt-img src="/image.png" :modifiers="{ grayscale: true, tint: '#00DC82' }" />

Animated Images

Example:

<nuxt-img src="/image.gif" :modifiers="{ animated: true }" />