Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.tenbyte.io/llms.txt

Use this file to discover all available pages before exploring further.

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