Product Updates

The new version of vue-datocms — v4.0.0 — makes available to Vue users an important improvement that we released some days ago for the people working with React.

Here is the news: with this new version, you can reduce responsiveImage() GraphQL queries down to:

responsiveImage(imgixParams: { auto: format }) {
  src width height alt base64
}

• You can avoid requesting srcSet in the responsiveImage GraphQL query, as if it's missing, the Vue <Image /> component knows how to build it from src.

• You can avoid requesting webpSrcSet as well, because the { auto: format } Imgix transformation parameter offers even more performant optimizations (AVIF), without increasing the GraphQL response size.

• You can avoid requesting sizes, and use the sizes prop on the Image component itself.

These changes can sensibly reduce the overall GraphQL response size, particularly when dealing with many images at once.

New props for Image component:

• priority: When true, the image will be considered high priority. Lazy loading is automatically disabled, and fetchpriority="high" is added to the image.

  You should use the priority property on any image detected as the Largest Contentful Paint (LCP) element. It may be appropriate to have multiple priority images, as different images may be the LCP element for different viewport sizes. Should only be used when the image is visible above the fold.

• sizes: If you're using this prop, you can avoid requesting sizes in the responsiveImage query.

• src-set-candidates: If you're not requesting srcSet in the responsiveImage query, src-set-candidates will be used to generate the different srcset candidate strings at various widths. Default candidates are: [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4].