Nuxt > Responsive images

One of the advantages of using DatoCMS is its responsiveImage query, which will return pre-computed image attributes that will help you setting up responsive images in your frontend without any additional manipulation.

To make it even easier to use, we offer a Vue component ready to use to render responsive, progressive images on your projects. The package called vue-datocms exposes an <Image /> component and pairs perfectly with the responsiveImage query.

Our solution offers similar advantages of using NuxtImage, with the benefit of having beautiful low-quality image placeholders (LQIP) in base64 format embedded directly within the page and responsive images optimized for the user browser and resolution. Images are managed directly via the DatoCMS Media section:

To take advantage of it, install the vue-datocms package:

yarn add vue-datocms

Then, inside your Nuxt page, feed content coming from a responsiveImage query directly into the <Image /> component:

<script setup>
import { Image as DatocmsImage } from "vue-datocms";
const QUERY = `query HomePage($limit: IntType) {
  allBlogPosts(first: $limit) {
    id
    title
    coverImage {
      responsiveImage(imgixParams: { fit: crop, w: 300, h: 300, auto: format }) {
        srcSet
        webpSrcSet
        sizes
        src
        width
        height
        aspectRatio
        alt
        title
        base64
      }
    }
  }
}`;
const { data, error } = await useQuery(QUERY);
</script>
<template>
  <div>
    <article v-for="blogPost in data.allBlogPosts" :key="blogPost.id">
      <DatocmsImage :data="blogPost.coverImage.responsiveImage" />
      <h1>{{ blogPost.title }}</h1>
    </article>
  </div>
</template>

The vue-datocms package also offer a <NakedImage /> component which generates minimum JS footprint, outputs a single <picture /> element and implements lazy-loading using the native loading="lazy" attribute. You can refer to the package README to learn more.