Apollo Vue

Vue 3 bindings for the Apollo design system (@xplortech/apollo-core web components). Use this package in Vue apps for props, events, and v-model on form controls.

Installation

Published as @xplortech/apollo-vue on the public npm registry (same scope as @xplortech/apollo-core and @xplortech/apollo-react).

npm install @xplortech/apollo-vue

@xplortech/apollo-core is included as a dependency — you do not need to install both.

Peer dependencies: Vue 3+ and TypeScript 5+.

Import the full stylesheet once in your app (backwards-compatible bundle):

import '@xplortech/apollo-vue/css/apollo.css';

For modular CSS (brand theming and treeshaking), import from the proxy paths exposed by this package:

import '@xplortech/apollo-vue/css/variables/apollo.css';
import '@xplortech/apollo-vue/css/core.css';
import '@xplortech/apollo-vue/css/tailwind-theme.css'; // when using Tailwind v4 with Apollo theme tokens

Other modular entry points: reset.css, typography.css, variables/field-edge.css, and vendor/flatpickr.css.

Per-component CSS for treeshaking is not proxied here — import directly from @xplortech/apollo-core/css/components/* (for example @xplortech/apollo-core/css/components/button.css). When using these per-component paths, declare @xplortech/apollo-core in your own package.json: it otherwise resolves as a pinned transitive dependency of this package via npm hoisting, which is fragile and prevents bumping core independently.

Server-side rendering (Nuxt / SSR)

Import component bindings from the package root — there is no separate ./server subpath. Generated proxies auto-select the Stencil SSR factory when window is undefined, so the same @xplortech/apollo-vue imports work in Nuxt and other SSR setups. See the Apollo SSR guide for Nuxt configuration.

Registering components

Option A — global plugin (registers custom elements)

import { createApp } from 'vue';
import { ComponentLibrary } from '@xplortech/apollo-vue';
import App from './App.vue';

const app = createApp(App);
app.use(ComponentLibrary);
app.mount('#app');

Option B — import only what you use

<script setup lang="ts">
import { XplButton, XplInput } from '@xplortech/apollo-vue';
</script>

<template>
  <XplButton variant="primary">Save</XplButton>
  <XplInput v-model="email" label="Email" type="email" />
</template>

Importing from @xplortech/apollo-vue loads the generated proxies, which call defineCustomElements() from @xplortech/apollo-core/loader.

v-model (form components)

These wrappers map v-model to the correct property and update event:

| Component | v-model binds to | Update event (internal) | |---------------|--------------------|-------------------------| | XplInput | value | valueChange (text fields: each keystroke) | | XplCheckbox | checked | checkboxChange | *| | XplRadio | checked | radioChange | | XplToggle | checked | toggleChange | | XplSelect | selectedValues | changeEvent |

Example:

<script setup lang="ts">
import { ref } from 'vue';
import { XplInput, XplCheckbox, XplSelect } from '@xplortech/apollo-vue';

const name = ref('');
const agreed = ref(false);
const selected = ref<string | string[]>([]);
</script>

<template>
  <XplInput v-model="name" label="Name" />
  <XplCheckbox v-model="agreed" label="I agree" />
  <XplSelect
    v-model="selected"
    label="Choose"
    :choices="[]"
    placeholder="Select…"
  />
</template>

* XplCheckbox v-model binds to checked. When no value prop is set, it emits a boolean (checked state). When value is also set, it emits the string value when checked. Type your ref accordingly.

XplChoicelist: there is no v-model mapping yet; use @choicelistChange / @choicelistValueChange and props manually.

Specialized input types: <XplInput type="date" />, type="time", type="phone", type="color", and type="file" all work with v-model. Internally, xpl-input renders a sub-component (e.g. xpl-input-date) and forwards its events. Prefer <XplInput type="date" v-model="val" /> over using XplInputDate directly.

Events and complex props

Stencil @Event() names are exposed as Vue emits (e.g. @valueChange, @checkboxChange). Pass objects and arrays as props the same way as with other Vue components:

<script setup lang="ts">
import { XplTable } from '@xplortech/apollo-vue';
const rows = [[]];
const cols = [];
function onSelect() {}
</script>

<template>
  <XplTable :data="rows" :columns="cols" @table-select="onSelect" />
</template>

Suppressing unknown-element warnings

If your bundler warns about xpl-* tags as unknown custom elements, tell the Vue compiler to treat them as web components:

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

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

Further reading

• Apollo repo
• Core components and behavior: @xplortech/apollo-core / Storybook in this monorepo