Use Nuxt Photo with Vue

Install the Vue package directly and wire its styles in a Vite-powered Vue app.

Plain Vue applications use @lupinum/vue-photo. They do not install or register the Nuxt module.

These docs describe the 1.0 beta. Install the next release while npm latest remains on 0.2.

Install

npm install @lupinum/vue-photo@next

Render the first album

Import components and types from the Vue package root. Import the complete stylesheet once from the application entry or root component.

src/App.vue

<script setup lang="ts">
import { PhotoAlbum, type PhotoItem } from '@lupinum/vue-photo'
import '@lupinum/vue-photo/styles.css'

const photos: PhotoItem[] = [
  {
    id: 'dunes',
    src: '/photos/dunes.jpg',
    width: 1280,
    height: 800,
    alt: 'Dunes at sunset',
  },
  {
    id: 'coast',
    src: '/photos/coast.jpg',
    width: 960,
    height: 1200,
    alt: 'Rocky coast from above',
  },
]
</script>

<template>
  <PhotoAlbum :photos="photos" :layout="{ type: 'rows', targetRowHeight: 240 }" />
</template>

No plugin registration is required. Vue's normal component imports, refs, slots, and provide/inject rules apply. Use @lupinum/vue-photo/composables, @lupinum/vue-photo/provide, and @lupinum/vue-photo/types only when a focused subpath makes an advanced integration clearer.

Nuxt Image integration belongs to @lupinum/nuxt-photo. In a plain Vue app, provide a custom ImageAdapter or use the native src, thumbSrc, and srcset fields from each PhotoItem.