Overview

Learn how to use images in the starter kit.

Nuxt Starter Kit uses Nuxt Image module to be able to resize and transform your images using built-in optimizer or your favorite images CDN.

I recommend to use two different providers in your project:

  • Cloudflare: You should use Cloudflare as provider for any images you retrieve from your NuxtHub blob. My recommendation is to use the NuxtHub blob storage for any images users can upload from your app.
  • Other provider: You should any other CDN as provider for any other images, like images for your landing page, blog, etc. IPX is a built-in image CDN that is included with Nuxt Image module.

You can configure your providers in your nuxt.config.ts file:

nuxt.config.ts
export default defineNuxtConfig({
  // ... other config
  image: {
    provider: 'ipx',
    providers: {
      customCloudflare: {
        options: {
          prodSiteURL: siteConfig.url,
        },
        provider: '~/providers/customCloudflare.ts',
      },
    },
  },
  // ... other config
})