@danilo.riedel/img-fit-vue

@danilo.riedel/img-fit-vue

Vue 3 adapter for img-fit.

Installation

npm install @danilo.riedel/img-fit-vue

Requires Vue 3 or later (peer dependency).

Usage

<script setup>
import { ImgFit } from '@danilo.riedel/img-fit-vue';
</script>

<template>
  <ImgFit
    src="https://cdn.example.com/photo.jpg"
    alt="Photo"
    params="f=webp&q=80"
  />
</template>

Props

All other attributes are forwarded to the underlying <img> element.

Options

All options from the core package are accepted. See @danilo.riedel/img-fit for the full list.

Retina / DPR

By default the component multiplies the measured container width by window.devicePixelRatio before snapping to a breakpoint. A 560 px container on a 2× Retina display generates ?rs=1250 instead of ?rs=600, keeping images crisp on every screen.

To request CSS pixel widths only:

<template>
  <ImgFit
    src="https://cdn.example.com/photo.jpg"
    alt="Photo"
    :options="{ dpr: false }"
  />
</template>

Extra parameters

Append extra img-fwd transform parameters via the params prop. They are inserted before ?rs= in the final URL:

<!-- Result: https://cdn.example.com/photo.jpg?f=webp&q=80&rs=1250 -->
<template>
  <ImgFit
    src="https://cdn.example.com/photo.jpg"
    alt="Photo"
    params="f=webp&q=80"
  />
</template>

Notes

• The component renders the original src during SSR and hydration.
• The optimized ?rs=<width> URL is applied on the client after the container is measured.
• Pass loading="lazy" and the core will recompute the URL via IntersectionObserver before the image loads.