vue-datocms 8.1.15 → 8.1.17

package/README.md

@@ -84,42 +84,20 @@ npm run dev
 
 <a href="https://www.datocms.com/"><img src="https://www.datocms.com/images/full_logo.svg" height="60" alt="DatoCMS - The Headless CMS for the Modern Web"></a>
 
-[DatoCMS](https://www.datocms.com/) is the REST & GraphQL Headless CMS for the modern web.
+[DatoCMS](https://www.datocms.com/) is Headless CMS for the modern web. Trusted by 25,000+ businesses, agencies, and individuals, it gives your team one place to manage content and ship it to any website, app, or device via API.
 
-Trusted by over 25,000 enterprise businesses, agencies, and individuals across the world, DatoCMS users create online content at scale from a central hub and distribute it via API. We ❤️ our [developers](https://www.datocms.com/team/best-cms-for-developers), [content editors](https://www.datocms.com/team/content-creators) and [marketers](https://www.datocms.com/team/cms-digital-marketing)!
+**New here?** Start with [Create free account](https://dashboard.datocms.com/signup) and the [Documentation](https://www.datocms.com/docs). Stuck? Ask the [Community](https://community.datocms.com/). Curious what's new? [Product Updates](https://www.datocms.com/product-updates).
 
-**Why DatoCMS?**
+**Building with AI:** [Agent Skills](https://www.datocms.com/docs/agent-skills) turn coding assistants (Claude Code, Cursor) into expert DatoCMS developers, with full read/write via the auto-installed CLI. No local terminal? Use the [MCP Server](https://www.datocms.com/docs/mcp-server) instead.
 
-- **API-First Architecture**: Built for both REST and GraphQL, enabling flexible content delivery
-- **Just Enough Features**: We believe in keeping things simple, and giving you [the right feature-set tools](https://www.datocms.com/features) to get the job done
-- **Developer Experience**: First-class TypeScript support with powerful developer tools
+**Talking to DatoCMS from code:**
+- [Content Delivery API](https://www.datocms.com/docs/content-delivery-api) (CDA) — the fast, read-only GraphQL API your website/app uses to **fetch** published content.
+- [Content Management API](https://www.datocms.com/docs/content-management-api) (CMA) — the REST API for **creating and updating** content, models, and project settings (think scripts, migrations, integrations).
+- [CLI](https://www.datocms.com/docs/scripting-migrations/installing-the-cli) — terminal tool for schema migrations and importing from Contentful/WordPress.
 
-**Getting Started:**
+**Framework guides:** end-to-end recipes for fetching content, rendering Structured Text, optimizing images/video, handling SEO, and setting up live preview with visual editing in [Next.js](https://www.datocms.com/docs/next-js), [Nuxt](https://www.datocms.com/docs/nuxt), [Svelte](https://www.datocms.com/docs/svelte), and [Astro](https://www.datocms.com/docs/astro).
 
-- ⚡️ [Create Free Account](https://dashboard.datocms.com/signup) - Get started with DatoCMS in minutes
-- 🔖 [Documentation](https://www.datocms.com/docs) - Comprehensive guides and API references
-- ⚙️ [Community Support](https://community.datocms.com/) - Get help from our team and community
-- 🆕 [Changelog](https://www.datocms.com/product-updates) - Latest features and improvements
+**Want a head start?** Browse our [starter projects](https://www.datocms.com/marketplace/starters) — ready-to-deploy example sites for popular frameworks.
 
-**Official Libraries:**
-
-- [**Content Delivery Client**](https://github.com/datocms/cda-client) - TypeScript GraphQL client for content fetching
-- [**REST API Clients**](https://github.com/datocms/js-rest-api-clients) - Node.js/Browser clients for content management
-- [**CLI Tools**](https://github.com/datocms/cli) - Command-line utilities for schema migrations (includes [Contentful](https://github.com/datocms/cli/tree/main/packages/cli-plugin-contentful) and [WordPress](https://github.com/datocms/cli/tree/main/packages/cli-plugin-wordpress) importers)
-
-**Official Framework Integrations**
-
-Helpers to manage SEO, images, video and Structured Text coming from your DatoCMS projects:
-
-- [**React Components**](https://github.com/datocms/react-datocms)
-- [**Vue Components**](https://github.com/datocms/vue-datocms)
-- [**Svelte Components**](https://github.com/datocms/datocms-svelte)
-- [**Astro Components**](https://github.com/datocms/astro-datocms)
-
-**Additional Resources:**
-
-- [**Plugin Examples**](https://github.com/datocms/plugins) - Example plugins we've made that extend the editor/admin dashboard
-- [**Starter Projects**](https://www.datocms.com/marketplace/starters) - Example website implementations for popular frameworks
-- [**All Public Repositories**](https://github.com/orgs/datocms/repositories?q=&type=public&language=&sort=stargazers)
 
 <!--datocms-autoinclude-footer end-->

package/dist/index.cjs.js

@@ -604,7 +604,7 @@ const Image$1 = vue.defineComponent({
     };
   },
   render() {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d;
     const addImage = imageAddStrategy({
       priority: this.priority,
       inView: this.inView,
@@ -615,10 +615,11 @@ const Image$1 = vue.defineComponent({
       inView: this.inView,
       loaded: this.loaded
     });
-    const webpSource = buildWebpSource(this.data, this.sizes);
+    const resolvedSizes = (_b = (_a = this.sizes) != null ? _a : this.data.sizes) != null ? _b : this.priority ? void 0 : "auto, 100vw";
+    const webpSource = buildWebpSource(this.data, resolvedSizes);
     const regularSource = buildRegularSource(
       this.data,
-      this.sizes,
+      resolvedSizes,
       this.srcSetCandidates
     );
     const transition = typeof this.fadeInDuration === "undefined" || this.fadeInDuration > 0 ? `opacity ${this.fadeInDuration || 500}ms` : void 0;
@@ -652,7 +653,7 @@ const Image$1 = vue.defineComponent({
       }, basePlaceholderStyle)
     }) : null;
     const { width, aspectRatio } = this.data;
-    const height = (_a = this.data.height) != null ? _a : aspectRatio ? width / aspectRatio : 0;
+    const height = (_c = this.data.height) != null ? _c : aspectRatio ? width / aspectRatio : 0;
     const sizer = this.layout !== "fill" ? vue.h(Sizer, {
       sizerClass: this.imgClass,
       sizerStyle: this.imgStyle,
@@ -678,6 +679,8 @@ const Image$1 = vue.defineComponent({
             src: this.data.src,
             alt: this.data.alt,
             title: this.data.title,
+            sizes: resolvedSizes,
+            loading: this.priority ? void 0 : "lazy",
             fetchpriority: this.priority ? "high" : void 0,
             onLoad: this.handleLoad,
             ref: "imageRef",
@@ -699,7 +702,7 @@ const Image$1 = vue.defineComponent({
             [
               this.data.webpSrcSet && tag("source", {
                 srcset: this.data.webpSrcSet,
-                sizes: (_c = (_b = this.sizes) != null ? _b : this.data.sizes) != null ? _c : void 0,
+                sizes: resolvedSizes,
                 type: "image/webp"
               }),
               tag("source", {
@@ -708,13 +711,14 @@ const Image$1 = vue.defineComponent({
                   this.data.width,
                   this.srcSetCandidates
                 ),
-                sizes: (_f = (_e = this.sizes) != null ? _e : this.data.sizes) != null ? _f : void 0
+                sizes: resolvedSizes
               }),
               tag("img", {
                 src: this.data.src,
                 alt: this.data.alt,
                 title: this.data.title,
                 class: this.imgClass,
+                sizes: resolvedSizes,
                 style: toCss(__spreadValues$5(__spreadProps$3(__spreadValues$5({}, absolutePositioning), {
                   objectFit: this.objectFit,
                   objectPosition: this.objectPosition
@@ -851,15 +855,16 @@ const NakedImage = vue.defineComponent({
     };
   },
   render() {
-    var _a;
-    const webpSource = buildWebpSource(this.data, this.sizes);
+    var _a, _b, _c;
+    const resolvedSizes = (_b = (_a = this.sizes) != null ? _a : this.data.sizes) != null ? _b : this.priority ? void 0 : "auto, 100vw";
+    const webpSource = buildWebpSource(this.data, resolvedSizes);
     const regularSource = buildRegularSource(
       this.data,
-      this.sizes,
+      resolvedSizes,
       this.srcSetCandidates
     );
     const { width } = this.data;
-    const height = (_a = this.data.height) != null ? _a : Math.round(this.data.aspectRatio ? width / this.data.aspectRatio : 0);
+    const height = (_c = this.data.height) != null ? _c : Math.round(this.data.aspectRatio ? width / this.data.aspectRatio : 0);
     const sizingStyle = {
       aspectRatio: `${width} / ${height}`,
       width: "100%",
@@ -891,6 +896,7 @@ const NakedImage = vue.defineComponent({
           alt: this.data.alt,
           onLoad: this.handleLoad,
           title: this.data.title,
+          sizes: resolvedSizes,
           fetchpriority: this.priority ? "high" : void 0,
           loading: this.priority ? void 0 : "lazy",
           style: __spreadValues$4(__spreadValues$4(__spreadValues$4({}, placeholderStyle), sizingStyle), this.imgStyle || {}),
@@ -1137,12 +1143,23 @@ const computedStyle = (width, height) => {
 const computedPlaceholder = (blurUpThumb) => {
   return blurUpThumb ? { placeholder: blurUpThumb } : void 0;
 };
+const computedPoster = (thumbnailUrl) => {
+  return thumbnailUrl ? { poster: thumbnailUrl } : void 0;
+};
 const useVideoPlayer = ({
   data
 }) => {
-  const { title, width, height, playbackId, muxPlaybackId, blurUpThumb } = data || {};
+  const {
+    title,
+    width,
+    height,
+    playbackId,
+    muxPlaybackId,
+    blurUpThumb,
+    thumbnailUrl
+  } = data || {};
   if (data === void 0) return {};
-  return __spreadValues$3(__spreadValues$3(__spreadValues$3(__spreadValues$3({}, computedTitle(title) || {}), computedPlaybackId(muxPlaybackId, playbackId) || {}), computedStyle(width, height) || {}), computedPlaceholder(blurUpThumb) || {});
+  return __spreadValues$3(__spreadValues$3(__spreadValues$3(__spreadValues$3(__spreadValues$3({}, computedTitle(title) || {}), computedPlaybackId(muxPlaybackId, playbackId) || {}), computedStyle(width, height) || {}), computedPlaceholder(blurUpThumb) || {}), computedPoster(thumbnailUrl) || {});
 };
 
 var __defProp$2 = Object.defineProperty;

package/dist/index.d.ts

@@ -959,6 +959,8 @@ type Video = {
     playbackId?: Possibly<string>;
     /** A data: URI containing a blurhash for the video  */
     blurUpThumb?: Possibly<string>;
+    /** A URL for the video thumbnail, used as the poster image */
+    thumbnailUrl?: Possibly<string>;
     /** Other data can be passed, but they have no effect on rendering the player */
     [k: string]: any;
 };
@@ -1213,6 +1215,7 @@ declare const VideoPlayer: vue.DefineComponent<{
         title?: string | null;
         playbackId?: string | null;
         placeholder?: string | null;
+        poster?: string | null;
     };
     otherProps: {
         disablePictureInPicture: boolean;
@@ -1693,11 +1696,13 @@ type Style = Maybe<CSSProperties>;
 type Title = Maybe<string>;
 type PlaybackId = Maybe<string>;
 type Placeholder = Maybe<string>;
+type Poster = Maybe<string>;
 type AttrsForMuxPlayer = {
     style?: Style;
     title?: Title;
     playbackId?: PlaybackId;
     placeholder?: Placeholder;
+    poster?: Poster;
 };
 type UseVideoPlayerArgs = {
     data?: Video;

package/dist/index.esm.mjs

@@ -605,7 +605,7 @@ const Image$1 = defineComponent({
     };
   },
   render() {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d;
     const addImage = imageAddStrategy({
       priority: this.priority,
       inView: this.inView,
@@ -616,10 +616,11 @@ const Image$1 = defineComponent({
       inView: this.inView,
       loaded: this.loaded
     });
-    const webpSource = buildWebpSource(this.data, this.sizes);
+    const resolvedSizes = (_b = (_a = this.sizes) != null ? _a : this.data.sizes) != null ? _b : this.priority ? void 0 : "auto, 100vw";
+    const webpSource = buildWebpSource(this.data, resolvedSizes);
     const regularSource = buildRegularSource(
       this.data,
-      this.sizes,
+      resolvedSizes,
       this.srcSetCandidates
     );
     const transition = typeof this.fadeInDuration === "undefined" || this.fadeInDuration > 0 ? `opacity ${this.fadeInDuration || 500}ms` : void 0;
@@ -653,7 +654,7 @@ const Image$1 = defineComponent({
       }, basePlaceholderStyle)
     }) : null;
     const { width, aspectRatio } = this.data;
-    const height = (_a = this.data.height) != null ? _a : aspectRatio ? width / aspectRatio : 0;
+    const height = (_c = this.data.height) != null ? _c : aspectRatio ? width / aspectRatio : 0;
     const sizer = this.layout !== "fill" ? h(Sizer, {
       sizerClass: this.imgClass,
       sizerStyle: this.imgStyle,
@@ -679,6 +680,8 @@ const Image$1 = defineComponent({
             src: this.data.src,
             alt: this.data.alt,
             title: this.data.title,
+            sizes: resolvedSizes,
+            loading: this.priority ? void 0 : "lazy",
             fetchpriority: this.priority ? "high" : void 0,
             onLoad: this.handleLoad,
             ref: "imageRef",
@@ -700,7 +703,7 @@ const Image$1 = defineComponent({
             [
               this.data.webpSrcSet && tag("source", {
                 srcset: this.data.webpSrcSet,
-                sizes: (_c = (_b = this.sizes) != null ? _b : this.data.sizes) != null ? _c : void 0,
+                sizes: resolvedSizes,
                 type: "image/webp"
               }),
               tag("source", {
@@ -709,13 +712,14 @@ const Image$1 = defineComponent({
                   this.data.width,
                   this.srcSetCandidates
                 ),
-                sizes: (_f = (_e = this.sizes) != null ? _e : this.data.sizes) != null ? _f : void 0
+                sizes: resolvedSizes
               }),
               tag("img", {
                 src: this.data.src,
                 alt: this.data.alt,
                 title: this.data.title,
                 class: this.imgClass,
+                sizes: resolvedSizes,
                 style: toCss(__spreadValues$5(__spreadProps$3(__spreadValues$5({}, absolutePositioning), {
                   objectFit: this.objectFit,
                   objectPosition: this.objectPosition
@@ -852,15 +856,16 @@ const NakedImage = defineComponent({
     };
   },
   render() {
-    var _a;
-    const webpSource = buildWebpSource(this.data, this.sizes);
+    var _a, _b, _c;
+    const resolvedSizes = (_b = (_a = this.sizes) != null ? _a : this.data.sizes) != null ? _b : this.priority ? void 0 : "auto, 100vw";
+    const webpSource = buildWebpSource(this.data, resolvedSizes);
     const regularSource = buildRegularSource(
       this.data,
-      this.sizes,
+      resolvedSizes,
       this.srcSetCandidates
     );
     const { width } = this.data;
-    const height = (_a = this.data.height) != null ? _a : Math.round(this.data.aspectRatio ? width / this.data.aspectRatio : 0);
+    const height = (_c = this.data.height) != null ? _c : Math.round(this.data.aspectRatio ? width / this.data.aspectRatio : 0);
     const sizingStyle = {
       aspectRatio: `${width} / ${height}`,
       width: "100%",
@@ -892,6 +897,7 @@ const NakedImage = defineComponent({
           alt: this.data.alt,
           onLoad: this.handleLoad,
           title: this.data.title,
+          sizes: resolvedSizes,
           fetchpriority: this.priority ? "high" : void 0,
           loading: this.priority ? void 0 : "lazy",
           style: __spreadValues$4(__spreadValues$4(__spreadValues$4({}, placeholderStyle), sizingStyle), this.imgStyle || {}),
@@ -1138,12 +1144,23 @@ const computedStyle = (width, height) => {
 const computedPlaceholder = (blurUpThumb) => {
   return blurUpThumb ? { placeholder: blurUpThumb } : void 0;
 };
+const computedPoster = (thumbnailUrl) => {
+  return thumbnailUrl ? { poster: thumbnailUrl } : void 0;
+};
 const useVideoPlayer = ({
   data
 }) => {
-  const { title, width, height, playbackId, muxPlaybackId, blurUpThumb } = data || {};
+  const {
+    title,
+    width,
+    height,
+    playbackId,
+    muxPlaybackId,
+    blurUpThumb,
+    thumbnailUrl
+  } = data || {};
   if (data === void 0) return {};
-  return __spreadValues$3(__spreadValues$3(__spreadValues$3(__spreadValues$3({}, computedTitle(title) || {}), computedPlaybackId(muxPlaybackId, playbackId) || {}), computedStyle(width, height) || {}), computedPlaceholder(blurUpThumb) || {});
+  return __spreadValues$3(__spreadValues$3(__spreadValues$3(__spreadValues$3(__spreadValues$3({}, computedTitle(title) || {}), computedPlaybackId(muxPlaybackId, playbackId) || {}), computedStyle(width, height) || {}), computedPlaceholder(blurUpThumb) || {}), computedPoster(thumbnailUrl) || {});
 };
 
 var __defProp$2 = Object.defineProperty;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-datocms",
-  "version": "8.1.15",
+  "version": "8.1.17",
   "type": "module",
   "description": "A set of components and utilities to work faster with DatoCMS in Vue.js environments",
   "keywords": [