@praffn/vue-dato-image v1.1.1

Vue Dato Image

Component for workig with images in DatoCMS.

Installation

npm install @praffn/vue-dato-image

or

yarn add @praffn/vue-dato-image

Usage

<template>
  <div>
    <DatoImage v-if="imageData" :data="imageData" />
  </div>
</template>

<script>
import gql from "graphql-tag";

export default {
  data() {
    return {
      imageData: null,
    };
  },
  async mounted() {
    const { data } = await this.$dato({
      query: gql`
        {
          page {
            image {
              responsiveImage {
                alt
                title
                base64
                bgColor
                width
                height
                sizes
                srcSet
                webpSrcSet
                src
              }
            }
          }
        }
      `,
    });
    this.imageData = data.page.image;
  },
};
</script>

Props

The ResponsiveImage object

This should be the object returned from your GraphQL query. There are some required properties: