Nuxt Module

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@macrulez/vue-image-kit/nuxt'],
  vueImageKit: {
    breakpoints: {
      sm: '(max-width: 640px)',
      md: '(max-width: 1024px)',
    },
  },
})

Integration Recipes show ready-made configurations for every case — with a note on what each is for and when to use it.

After setup:

• <VImage> and v-lazy-img are available in all templates without imports
• Every composable and utility this package exports is auto-imported — see Auto-imports below
• <VImage>'s CSS (layout/placeholder classes, the shimmer animation) is registered automatically — no manual import '@macrulez/vue-image-kit/style.css' needed, unlike plain Vue 3

Module options

vueImageKit: {
  breakpoints: { sm: '(max-width: 640px)' },
  serverRoute: '/api/img',
  onDemandServer: true,
  placeholders: { dirs: ['public/images'] },
}

• breakpoints — BreakpointMap · default: {}. Global art-direction breakpoints, same as the Vue plugin's breakpoints option — see Global breakpoints.
• serverRoute — string, optional. Default route for loader="server" — see useServerRoute(). Only needs setting directly when the on-demand handler lives somewhere this module didn't register itself; set automatically when onDemandServer.route is used instead.
• onDemandServer — boolean | OnDemandServerOptions, optional. Registers the self-hosted server as a real Nitro route — see On-demand images as a Nitro route below.
• placeholders — string | object, optional. How every <VImage>, v-lazy-img and useBackgroundImage() get their placeholder by src:
  • A string is the path of a manifest file, relative to the project root — usually the one npx vue-image-kit placeholders writes. The module registers a plugin that provides it.
  • An object takes every placeholder option of the Vite plugin — imports (a placeholder for every imported image, with extensions, exclude and preview), mode, tuning, dirs, urls, publicDir, concurrency, timeout, maxBytes, refreshRemote — described one by one in Placeholder options, with dirs relative to the project root. For a placeholders manifest use dirs and urls; for a blur on every imported image, imports; for a ready preview in the server-rendered HTML, imports.preview together with the ssrPlaceholder prop (see step by step). The module registers that plugin itself, builds the manifest from the folders on every build and provides it, so there is no command to run. Add manifest: './image-placeholders.ts' to merge a manifest file in as well.

Auto-imports

Every public composable and utility function is auto-imported — useImage(), useBackgroundImage(), useBlurhash(), useBreakpoints(), useLazyLoad(), useImagePreloader(), useNetworkAware(), useServerRoute(), and every function from Placeholders / Responsive Images — no explicit import needed for any of them inside a Nuxt app using this module.

Not auto-imported, on purpose: VImage/v-lazy-img are registered as a global component/directive instead (see above, not composables); VImageKitPlugin installs itself, so importing it manually would be pointless inside this module; BREAKPOINTS_KEY/SERVER_ROUTE_KEY are advanced injection-key constants nobody needs directly in a Nuxt app the module already wires up.

On-demand images as a Nitro route

Set onDemandServer to register the self-hosted server's handler as a real Nitro server route via addServerHandler — no manual server/routes/... file needed:

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@macrulez/vue-image-kit/nuxt'],
  vueImageKit: {
    onDemandServer: true, // root defaults to Nuxt's own `public/` dir
  },
})

<VImage src="/photos/cat.jpg" alt="Photo" :widths="[400, 800]" loader="server" />

onDemandServer: true uses every default (root public/, route /_vik/image); pass an object to override any of them — same options as createImageHandler (root, cacheDir, maxAge, allowedWidths, maxWidth), plus route:

vueImageKit: {
  onDemandServer: {
    root: 'assets/uploads',
    route: '/api/img',
    maxWidth: 2000,
  },
},

The route also becomes loader="server"'s default automatically — no need to repeat it as serverRoute unless the handler lives somewhere this module didn't register (e.g. deployed separately). root is only ever put in private runtime config (useRuntimeConfig().vueImageKitServer, server side only) — never exposed to the client, unlike breakpoints.