Vue.js/Nuxt.js > Loading responsive, progressive images from DatoCMS

One of the mayor 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>
import { request } from "./datocms";
import { Image } from "vue-datocms";
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
      }
    }
  }
}`;
export default {
  name: "App",
  components: {
    "datocms-image": Image
  },
  data: () => ({
    data: null,
    error: null,
    loading: true
  }),
  async mounted() {
    try {
      this.data = await request({
        query: HOMEPAGE_QUERY,
        variables: {
          limit: 10
        }
      });
    } catch (e) {
      this.error = e;
    }
    this.loading = false;
  }
};
</script>