Vue - Keenpix docs

In any Vue 3 app, import the universal helper and bind it. For reuse, make a tiny component:

<!-- KeenpixImage.vue -->
<script setup lang="ts">
import { keenpix, keenpixSrcSet } from '@/lib/keenpix'

const props = withDefaults(
  defineProps<{ src: string; width?: number; sizes?: string }>(),
  { width: 1280, sizes: '100vw' },
)
</script>

<template>
  <img
    :src="keenpix(props.src, { w: props.width, fmt: 'auto' })"
    :srcset="keenpixSrcSet(props.src)"
    :sizes="props.sizes"
    loading="lazy"
    decoding="async"
  />
</template>

<KeenpixImage src="https://cdn.example.com/hero.jpg" :width="1280" alt="Hero" />

(Prefer @nuxt/image? See the Nuxt guide for a custom provider.)