swiftimg

Image hosting for Vue and Nuxt — point @nuxt/image at swiftimg

Nuxt's `@nuxt/image` module supports custom providers — pointing it at swiftimg's delivery host gives you on-the-fly resize and WebP without paying a separate image-CDN bill per transform.

Try swiftimg freeSee the API

Heads-up

If you're on Nuxt's hosting (NuxtHub, Cloudflare) and using their image binding, you may already get on-the-fly resize. swiftimg is the alternative when you want the source images to live outside the app deployment.

Step by step

  1. 1. Add swiftimg as a custom provider

    Define a provider that maps Nuxt's image options to swiftimg URL parameters.

    providers/swiftimg.ts
    // providers/swiftimg.ts
    export const getImage = (src, { modifiers = {} }) => {
      const params = new URLSearchParams();
      if (modifiers.width) params.set("w", String(modifiers.width));
      if (modifiers.format) params.set("fm", modifiers.format);
      return { url: `https://i.swiftimg.com/${src}?${params}` };
    };
  2. 2. Use <NuxtImg> as usual

    The provider takes care of building the URL.

    Vue template
    <NuxtImg src="abc123.png" provider="swiftimg" width="800" format="webp" />
  3. 3. Plain Vue (no Nuxt)

    If you're on a Vue SPA, just reference the swiftimg URL directly — same as any other img src.

Vue / Nuxt — FAQ

Will Nuxt's auto-optimisation still apply?

Nuxt's IPX optimisation is for local images. With a custom provider pointed at swiftimg, transforms happen on the CDN.

Can I keep some images on the default IPX provider?

Yes — pass `provider` per-image, defaulting to whichever you prefer.

What about TypeScript types for the custom provider?

`@nuxt/image` exports the provider type from `@nuxt/image/dist/runtime/types`. Use it for autocomplete.

See also

Ready to host your Vue / Nuxt images?

Start free, then unlock the full API, transforms, signed URLs, and a custom domain on the Developer plan.