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:

1
<script setup>
2
import { Image as DatocmsImage } from "vue-datocms";
3

4
const QUERY = `query HomePage($limit: IntType) {
5
  allBlogPosts(first: $limit) {
6
    id
7
    title
8
    coverImage {
9
      responsiveImage(imgixParams: { fit: crop, w: 300, h: 300, auto: format }) {
10
        srcSet
11
        webpSrcSet
12
        sizes
13
        src
14
        width
15
        height
16
        aspectRatio
17
        alt
18
        title
19
        base64
20
      }
21
    }
22
  }
23
}`;
24

25
const { data, error } = await useQuery(QUERY);
26
</script>
27

28
<template>
29
  <div>
30
    <article v-for="blogPost in data.allBlogPosts" :key="blogPost.id">
31
      <DatocmsImage :data="blogPost.coverImage.responsiveImage" />
32
      <h1>{{ blogPost.title }}</h1>
33
    </article>
34
  </div>
35
</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.