@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

| Prop | Type | Required | Description | |------|------|----------|-------------| | apiUrl | string | yes | Apex API base URL | | apiKey | string | yes | Widget API key (apex_widget_...) | | theme | 'light' \| 'dark' \| 'system' | | Visual theme. Defaults to light | | height | string \| number | | | | width | string \| number | | | | initialRootItem | string | | Pre-select a root item by code | | initialItems | string[] | | Pre-select child items by code |

Emits

| Event | Wire event | Detail | |-------|------------|--------| | ready | apex:ready | catalog loaded | | item-select | apex:rootitemselect | root product selected | | addon-change | apex:itemselectionchange | add-on selection changed | | quote-submit | apex:quotesubmit | quote submitted | | error | apex:error | error surfaced |

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