Nuxt Module

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

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

Module options

vueImageKit: {
  breakpoints: { sm: '(max-width: 640px)' },
  serverRoute: '/api/img',
  onDemandServer: true,
}

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

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.