@imgflow/vue/dist/vue.js

Vue 3 responsive <Picture> component using vite-imagetools & LQIP, no CDN

import { ref as s, onMounted as d, createElementBlock as u, createCommentVNode as g, openBlock as p, createElementVNode as r } from "vue";
const m = { key: 0 }, h = ["srcset"], y = ["src", "alt", "loading", "decoding", "width", "height"], f = {
  __name: "Pic",
  props: {
    src: { type: String, required: !0 },
    alt: { type: String, default: "" },
    loading: { type: String, default: "lazy" },
    decoding: { type: String, default: "async" }
  },
  setup(e) {
    const n = e, a = s(null), t = s(null);
    return d(async () => {
      const c = "?w=500;700;900;1200&format=webp&as=srcset", i = "?lqip", l = await import(
        /* @vite-ignore */
        n.src + c
      ), o = await import(
        /* @vite-ignore */
        n.src + i
      );
      a.value = l.default || l, t.value = o.default || o;
    }), (c, i) => a.value && t.value ? (p(), u("picture", m, [
      r("source", {
        srcset: a.value,
        type: "image/webp"
      }, null, 8, h),
      r("img", {
        src: t.value,
        alt: e.alt,
        loading: e.loading,
        decoding: e.decoding,
        width: t.value.width,
        height: t.value.height
      }, null, 8, y)
    ])) : g("", !0);
  }
}, w = {
  install(e) {
    e.component("Pic", f);
  }
};
export {
  f as Pic,
  w as default
};