Vue.js > Loading responsive, progressive images from DatoCMS

One of the major advantages of using DatoCMS instead of any other content management systems 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 offer responsive, progressive, lazy-loaded images on your projects, we released a package called vue-datocms that exposes an <datocms-image /> component that pairs perfectly with the responsiveImage query:

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

npm install --save vue-datocms

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

<template>
  <div>
    <div v-if="loading">
      Loading...
    </div>
    <div v-else-if="error">
      Something bad happened!
    </div>
    <div v-else>
      <article v-for="blogPost of data.allBlogPosts" v-bind:key="blogPost.id">
        <h6>{{blogPost.title}}</h6>
        <datocms-image :data="blogPost.coverImage.responsiveImage" />
      </article>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { Image as DatocmsImage } from "vue-datocms";
import { request } from "./datocms";
const data = ref(null);
const error = ref(null);
const loading = ref(true);
const HOMEPAGE_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
        aspectRatio
        alt
        title
        base64
      }
    }
  }
}`;
onMounted(async () => {
  try {
    data.value = await request({
      query: HOMEPAGE_QUERY,
      variables: {
        limit: 10
      }
    });
  } catch (e) {
    error.value = e;
  }
  loading.value = false;
})
</script>