Install Nuxt Photo

Install the module, register it, and get the auto-imports.

Install one Nuxt module and enable its complete theme. The module registers the photo components and auto-imports its helpers.

These docs describe the Nuxt Photo 1.0 beta. Install the next release while the stable latest tag remains on 0.2. Existing 0.2 applications should follow the 1.0 upgrade guide.

Prerequisites

Nuxt 4.4.8+ within Nuxt 4
Node 22.18+ within Node 22, or 24.11+ within Node 24

Install the beta

Add the module and the complete visual theme to your nuxt.config:

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@lupinum/nuxt-photo'],
  nuxtPhoto: {
    css: 'all',
  },
})

The module now registers <Photo>, <PhotoAlbum>, <PhotoGroup>, and <PhotoCarousel>. It also auto-imports helpers such as useLightbox. The css: 'all' option includes the visual theme for your first gallery. The default css: 'structure' option is for applications that provide their own theme.

What got installed

The @lupinum/nuxt-photo package depends on the Vue library internally, so Nuxt apps only install the module package.

Package	Purpose
`@lupinum/nuxt-photo`	Nuxt module, component registration, auto-imports, image wiring
`@lupinum/vue-photo`	Components, composables, primitives, styles, types, photo helpers

For Nuxt app code, use auto-imports or explicit imports from @lupinum/nuxt-photo/app. Install @lupinum/vue-photo directly only in plain Vue apps.

Add `@nuxt/image` later

Install @nuxt/image when you want responsive image generation and provider integrations such as Cloudinary, Vercel, or local IPX. It is optional for the first gallery.

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@nuxt/image', '@lupinum/nuxt-photo'],
})

With @nuxt/image present, every thumbnail and lightbox slide is routed through it. Configure remote domains and provider-specific source rules in the Nuxt image block; use nuxtPhoto.image only for Nuxt Photo's thumb and slide defaults.

Image providers

Continue with Build your first album. That page owns the complete copyable example and describes the result you should see.