Nuxt

@nuxt/image supports custom providers, so <NuxtImg> and <NuxtPicture> can route through Keenpix with full responsive support.

1. Add a provider

// providers/keenpix.ts
import { createOperationsGenerator } from '#image'

const operationsGenerator = createOperationsGenerator({
  keyMap: { width: 'w', height: 'h', quality: 'q', format: 'fmt', fit: 'fit' },
  joinWith: '&',
  formatter: (key, value) => `${key}=${value}`,
})

export const getImage = (src, { modifiers = {}, baseURL = '', project = '' } = {}) => {
  const operations = operationsGenerator(modifiers)
  const url = src.startsWith('http') ? src : `${baseURL}${src}` // Keenpix needs an absolute URL
  const query = `project=${project}${operations ? `&${operations}` : ''}`
  return {
    url: `${process.env.KEENPIX_HOST}/img/${encodeURIComponent(url)}?${query}`,
  }
}

2. Register it

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/image'],
  image: {
    providers: {
      keenpix: {
        name: 'keenpix',
        provider: '~/providers/keenpix.ts',
        options: { baseURL: 'https://cdn.example.com', project: 'YOUR_ID' },
      },
    },
  },
})

3. Use it

<template>
  <NuxtImg provider="keenpix" src="/hero.jpg" width="1200" sizes="100vw" />
</template>

Leaving format unset means the generated Keenpix URL has no fmt parameter, so Keenpix uses the browser's Accept header and serves AVIF, WebP, or JPEG based on support, including for SVG sources. Passing format="avif" or format="webp" intentionally forces that output format; passing format="svg" is required when you want an SVG origin returned as optimized SVG.

Nuxt Image format props

In @nuxt/image, the format prop maps to Keenpix's fmt query parameter. Do not pass a helper that always returns avif unless you want to force AVIF for every client. For JoodCMS-style wrappers, keep the wrapper's default format value undefined and only pass a format for deliberate fixed-format URLs.

Simpler option

If you don't need @nuxt/image's responsive machinery, skip the provider and bind a plain <img :src="keenpix('/hero.jpg', { w: 1200 })"> using the universal helper.

1. Add a provider

2. Register it

3. Use it

On this page