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

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
   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.

   <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.

See also

• Image hosting for Next.js

  Display a public swiftimg image with next/image. Complete App Router example, remotePatterns setup, static export guidance, and troubleshooting.

• Image hosting for SvelteKit

  Reference swiftimg URLs from SvelteKit components and Markdown content. Permanent URLs, on-the-fly resize, and global delivery.

• Image hosting for Astro

  Reference swiftimg URLs from Astro's <Image /> component. Permanent URLs, automatic WebP variants, on-the-fly resize, and global delivery.

• swiftimg vs imgix

  Compare swiftimg and imgix: hosting workflows, editing, costs and migration.