Nuxt

Nuxt’s @nuxt/image module supports custom providers. Configure Tenbyte once and use <NuxtImg> (or <NuxtPicture>) anywhere in your app — Nuxt handles srcset, lazy loading, and sizing.

Prerequisites

Nuxt 3 with @nuxt/image installed:
npm install @nuxt/image
A Tenbyte distribution with Image Optimizer enabled.
Your Tenbyte CDN hostname.

Configure the provider

nuxt.config.ts

export default defineNuxtConfig({
  modules: ["@nuxt/image"],
  image: {
    provider: "tenbyte",
    tenbyte: {
      baseURL: "https://your-distribution.tenbytecdn.com",
    },
  },
});

Use `<NuxtImg>`

<template>
  <NuxtImg
    src="/sea.jpeg"
    width="800"
    height="500"
    sizes="sm:100vw md:50vw lg:800px"
    fit="cover"
    :modifiers="{ format: 'auto', quality: 80 }"
    loading="lazy"
    alt="Sea view" />
</template>

Nuxt resolves src against baseURL and emits a srcset with multiple widths. modifiers map to Tenbyte transform query params.

Use `<NuxtPicture>` for advanced fallbacks

<template>
  <NuxtPicture
    src="/hero.jpg"
    width="1600"
    sizes="100vw"
    :modifiers="{ format: 'auto', quality: 80 }"
    alt="Hero" />
</template>

<NuxtPicture> emits a <picture> with multiple <source> elements — one per format — for browsers that need explicit fallbacks.

Verify

# Render the page and inspect generated URLs
curl -sS http://localhost:3000 | grep -oE 'tenbytecdn\.com[^"]+' | head -3

Expected URLs include your transforms:

your-distribution.tenbytecdn.com/sea.jpeg?w=320&q=80&format=auto
your-distribution.tenbytecdn.com/sea.jpeg?w=640&q=80&format=auto
your-distribution.tenbytecdn.com/sea.jpeg?w=800&q=80&format=auto

Tips

Use sizes — without it, Nuxt picks the largest width for every breakpoint.
Pin quality in modifiers — keeps bundle output deterministic.
format: 'auto' — lets the edge negotiate WebP / AVIF based on the browser’s Accept header.
Lazy-load by default — Nuxt’s default. Override with loading="eager" only above the fold.
Cache long. Set a long TTL on /path/to/images/* via cache rules; each variant is independent.

Reference

@nuxt/image documentation

Home

Account & Organization

Vidinfra

Live Streaming

CDN

Cloud

Prerequisites

Configure the provider

Use `<NuxtImg>`

Use `<NuxtPicture>` for advanced fallbacks

Verify

Tips

Reference

​Prerequisites

​Configure the provider

​Use <NuxtImg>

​Use <NuxtPicture> for advanced fallbacks

​Verify

​Tips

​Reference

Prerequisites

Configure the provider

Use `<NuxtImg>`

Use `<NuxtPicture>` for advanced fallbacks

Verify

Tips

Reference