@ascentra/apex-vue

@ascentra/apex-vue

Vue 3 wrapper for the Apex configurator widget. Renders the <apex-widget> web component as an idiomatic Vue Single File Component.

Install

npm install @ascentra/apex-vue @ascentra/apex vue

The core widget script (@ascentra/apex) is a peer dependency. You can either import it (so a bundler picks it up) or load it from the CDN as a <script> tag — either way, the custom element must be registered before <ApexWidget /> mounts.

Vite / Vue compiler config

<apex-widget> is a custom element. Tell the Vue template compiler not to treat it as a Vue component:

// vite.config.ts
import vue from "@vitejs/plugin-vue";

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => tag.startsWith("apex-"),
        },
      },
    }),
  ],
});

Usage

<script setup lang="ts">
import { ApexWidget } from "@ascentra/apex-vue";
import "@ascentra/apex"; // registers <apex-widget>
import "@ascentra/apex/style.css";

function onSubmit(event: CustomEvent) {
  console.log("Quote submitted:", event.detail);
}
</script>

<template>
  <ApexWidget
    api-url="https://api.apex.ascentra.io"
    api-key="apex_widget_..."
    theme="light"
    :height="600"
    width="100%"
    @quote-submit="onSubmit"
    @error="(e) => console.error(e.detail)"
  />
</template>

Props

Emits

SSR / Nuxt

The widget is browser-only. Wrap usage in a <ClientOnly> block (Nuxt) or otherwise gate it behind a client-side mount.

Versioning

@ascentra/apex-vue ships in lockstep with @ascentra/apex. Both packages share the same version on every release.

License

MIT