Use the UPCS Embed in Vue

UPCS has no official Vue plugin. The single-file component below is an illustrative implementation pattern using the documented embed script. It mounts the map when the component appears and destroys it when the component goes away.

The component

<script setup>
import { onMounted, onBeforeUnmount, ref } from 'vue';

const emit = defineEmits(['select']);
const props = defineProps({ height: { type: String, default: '500px' } });
const el = ref(null);
let handle = null;

function loadScript() {
  if (window.UPCS) return Promise.resolve();
  return new Promise((resolve, reject) => {
    const s = document.createElement('script');
    s.src = 'https://api.upcs.io/api/embed/upcs-embed.js';
    s.onload = resolve;
    s.onerror = reject;
    document.head.appendChild(s);
  });
}

onMounted(async () => {
  await loadScript();
  const res = await fetch('/upcs-session');
  const { session_token } = await res.json();

  el.value.id = el.value.id || 'upcs-map-' + Math.random().toString(36).slice(2);
  handle = window.UPCS.mount('#' + el.value.id, {
    sessionToken: session_token,
    height: props.height,
    onSelect: (result) => emit('select', result),
    onError: (err) => console.error('UPCS', err)
  });
});

onBeforeUnmount(() => {
  if (handle) handle.destroy();
});
</script>

<template>
  <div ref="el"></div>
</template>

Using it

<UpcsMap @select="order.upcsCode = $event.upcs_code" />

Notes

• Keep your API key on the server. /upcs-session is your endpoint; see creating a session in Python or PHP for server examples.
• Destroying the handle matters in single-page apps with route changes; see embed lifecycle: mount and destroy.
• Handle expiry in onError: handle onError and session_expired.
• All options are listed in UPCS.mount options explained.

Remember to register your dev and production origins as described in allowed origins explained.