nuxt-ipx-cache

Nuxt IPX Cache

Cache IPX-optimized images to disk and save your CPU time!

• ✨  Release Notes
• 🔗  Repository

Features

• Local Caching: Stores IPX-transformed images on disk to reduce CPU usage on repeated requests.
• Automatic Cache Management: Handles cache expiration and cleanup based on configurable TTL.
• Seamless Integration: Leverage existing Nuxt's official @nuxt/image module.
• Configurable: Customize cache directory, max age, and IPX prefix.

Quick Setup

Install the module to your Nuxt application with one command:

npx nuxi module add nuxt-ipx-cache

The module will automatically start caching IPX-transformed images.

Configuration

You can configure the module in your nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['nuxt-ipx-cache'],
  ipxCache: {
    // Max cache age in seconds before getting deleted from disk (default: 86400 - 1 day)
    maxAge: 86400,
    // Image cache location relative to process.cwd() (default: '.cache/ipx')
    cacheDir: '.cache/ipx',
    // IPX handler endpoint (default: '/_ipx')
    ipxPrefix: '/_ipx',
  },
});

How It Works

This module inspired by this issue. Intercepts IPX requests and caches the transformed images locally. On subsequent requests for the same transformation, it serves the image from the cache instead of re-processing it, significantly reducing CPU load.

• Images are cached with their metadata (headers like etag, content-type, etc.).
• Cache entries expire based on the maxAge setting.
• Supports purging cache by adding cache-control: ipx-purge header to the request.