Self hosted image provider

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.

You don't need to follow this section if using target: 'static'.

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
  1. 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)
  1. Add /_ipx to serverMiddleware:
export default {  serverMiddleware: {    '/_ipx': '~/server/middleware/ipx.js'  }}

Additional Modifiers

You can use additional modifiers supported by IPX.


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

Animated Images

This feature is currently experimental. When using, gif format is converted to webp (check browser support). Setting size is also not supported yet (check lovell/sharp#2275 and unjs/ipx#35).


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