With NuxtImage

NuxtImage - Plug-and-play image optimization for Nuxt apps. Resize and transform your images using built-in optimizer or your favorite images CDN.

• Website
• Github Repo

TIP

The vue-photo-album has built-in responsive image functionality out of the box. When you use Nuxt, you can still choose to use the responsive image feature from the NuxtImage module.

To integrate with the NuxtImage module, you could also achieve it by customizing the photo renderer with <NuxtImg /> component and sizes property.

https://image.nuxt.com/usage/nuxt-img#sizes

It is worth noting that NuxtImage has its own default screen settings for breakpoints. You can check the details here:

https://image.nuxt.com/get-started/configuration#screens

Usage

nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  modules: ['@nuxt/image'],
  image: {
    provider: 'unsplash',
    unsplash: {
      baseURL: 'https://images.unsplash.com/',
      modifiers: {
        fm: 'jpg',
        crop: 'entropy',
        fit: 'crop'
      }
    }
  }
})

App.vue

<script setup lang="ts">
import { PhotoAlbum } from 'vue-photo-album'
import CustomPhotoNuxtImageAdapter from './CustomPhotoNuxtImageAdapter.vue'
import data from './unsplash.json'

const photos = ref(data);
</script>

<template>
  <PhotoAlbum
    layout="rows"
    :photos="photos"
    :default-container-width="1200"
    :photo-renderer="CustomPhotoNuxtImageAdapter"
  />
</template>

CustomPhotoNuxtImageAdaper.vue

<script setup lang="ts">
import { type PhotoRendererMetadata } from 'vue-photo-album'

const props = defineProps<PhotoRendererMetadata>()

const nuxtImgProps = computed(() => {
  const {
    src,
    width,
    height,
    sizes: imgSize,
    loading,
    decoding,
    title,
    alt,
  } = props.imageProps
  const sizes = 'xs sm md lg xl xxl 2xl'
    .split(' ')
    .map((screen) => `${screen}:${imgSize}`)
    .join(' ')
  return { src, width, height, sizes, loading, decoding, title, alt }
})
</script>

<template>
  <NuxtImg v-bind="nuxtImgProps" />
</template>

unsplash.json

[
  {
    "id": "photo-1514888286974-6c03e2ca1dba",
    "key": "gKXKBY-C-Dk",
    "width": 1920,
    "height": 1321
  },
  {
    "id": "photo-1573865526739-10659fec78a5",
    "key": "75715CVEJhI",
    "width": 771,
    "height": 1080
  },
  {
    "id": "photo-1495360010541-f48722b34f7d",
    "key": "mJaD10XeD7w",
    "width": 810,
    "height": 1080
  },
  {
    "id": "photo-1533738363-b7f9aef128ce",
    "key": "yMSecCHsIBc",
    "width": 810,
    "height": 1080
  },
  {
    "id": "photo-1618826411640-d6df44dd3f7a",
    "key": "CEx86maLUSc",
    "width": 720,
    "height": 1080
  },
  {
    "id": "photo-1526336024174-e58f5cdd8e13",
    "key": "rW-I87aPY5Y",
    "width": 720,
    "height": 1080
  },
  {
    "id": "photo-1592194996308-7b43878e84a6",
    "key": "ZCHj_2lJP00",
    "width": 720,
    "height": 1080
  },
  {
    "id": "photo-1596854407944-bf87f6fdd49e",
    "key": "p6yH8VmGqxo",
    "width": 1080,
    "height": 1080
  },
  {
    "id": "photo-1561948955-570b270e7c36",
    "key": "Tn8DLxwuDMA",
    "width": 558,
    "height": 1080
  },
  {
    "id": "photo-1519052537078-e6302a4968d4",
    "key": "LEpfefQf4rU",
    "width": 1920,
    "height": 1280
  },
  {
    "id": "photo-1529778873920-4da4926a72c2",
    "key": "nKC772R_qog",
    "width": 810,
    "height": 1080
  },
  {
    "id": "photo-1543852786-1cf6624b9987",
    "key": "7GX5aICb5i4",
    "width": 720,
    "height": 1080
  },
  {
    "id": "photo-1574158622682-e40e69881006",
    "key": "IuJc2qh2TcA",
    "width": 1080,
    "height": 1080
  },
  {
    "id": "photo-1494256997604-768d1f608cac",
    "key": "NodtnCsLdTE",
    "width": 1920,
    "height": 1199
  },
  {
    "id": "photo-1478098711619-5ab0b478d6e6",
    "key": "cWOzOnSoh6Q",
    "width": 1920,
    "height": 1280
  },
  {
    "id": "photo-1533743983669-94fa5c4338ec",
    "key": "so5nsYDOdxw",
    "width": 1920,
    "height": 1407
  },
  {
    "id": "photo-1511044568932-338cba0ad803",
    "key": "9UUoGaaHtNE",
    "width": 1920,
    "height": 1280
  },
  {
    "id": "photo-1574144611937-0df059b5ef3e",
    "key": "7AIDE8PrvA0",
    "width": 863,
    "height": 1080
  },
  {
    "id": "photo-1606214174585-fe31582dc6ee",
    "key": "BLW_KQ0Rkn0",
    "width": 719,
    "height": 1080
  },
  {
    "id": "photo-1536590158209-e9d615d525e4",
    "key": "13ky5Ycf0ts",
    "width": 720,
    "height": 1080
  }
]

Example

StackBlitz