Nuxt > Responsive images

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 useGraphqlQuery({ query: 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>