Integration
Nuxt
NuxtImg provider setup and component usage
Nuxt Image's <NuxtImg> component handles responsive srcset, lazy loading, and format negotiation automatically. Configure a custom provider that maps to the Assets API:
// nuxt.config.ts
export default defineNuxtConfig({
image: {
providers: {
avvyr: {
provider: "~/providers/avvyr-image",
options: {
baseURL: "https://assets.avvyr.com",
},
},
},
},
});
// providers/avvyr-image.ts
import { joinURL } from "ufo";
import type { ProviderGetImage } from "@nuxt/image";
export const getImage: ProviderGetImage = (src, { modifiers, baseURL } = {}) => {
const params = new URLSearchParams();
if (modifiers?.width) params.set("width", String(modifiers.width));
if (modifiers?.height) params.set("height", String(modifiers.height));
if (modifiers?.fit) params.set("fit", modifiers.fit);
if (modifiers?.format) params.set("fm", modifiers.format);
if (modifiers?.quality) params.set("q", String(modifiers.quality));
const query = params.toString();
return {
url: joinURL(baseURL, src) + (query ? `?${query}` : ""),
};
};
Usage in components:
<NuxtImg provider="avvyr" src="/assets/products/sofa.jpg" width="600" height="600" fit="fill" format="webp" quality="80" loading="lazy" />