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

    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>