@airovo/rva-vue

@airovo/rva-vue

Vue 3 wrapper for the <rva-image> web component. Renders the element and forwards src / alt plus any other attributes and listeners.

Install

npm i @airovo/rva-vue

Peer dependency: vue >= 3.3.

Quick start

<script setup>
import { RVAImage } from "@airovo/rva-vue";
const onRender = (e) => console.log(e.detail.topology);
</script>

<template>
  <RVAImage src="/hero.rva" alt="Hero" style="width:100%" @rva-render="onRender" />
</template>

Props

Any other attribute (style, class) or listener (@rva-render, @rva-cta, …) falls through to the underlying <rva-image>.

Events and property access

The wrapper is intentionally thin: use the element's native events, and a template ref for property-only features (bytes, srcResolver, ctaHandlers).

<script setup>
import { ref, onMounted } from "vue";
import { RVAImage } from "@airovo/rva-vue";

const el = ref(null);
onMounted(() => {
  el.value.ctaHandlers = { "shop-now": () => console.log("shop") };
});
</script>

<template>
  <RVAImage ref="el" src="/hero.rva" @rva-cta="(e) => console.log(e.detail.id)" />
</template>

Events: rva-load, rva-render, rva-error, rva-cta. See @airovo/rva-web for payloads.

Related

• @airovo/rva-web — the element itself
• @airovo/rva-react · @airovo/rva-svelte · @airovo/rva-node

RVA — Responsive Visual Asset, built by Airovo Technologies. Source · Issues