Vue 3

Before you begin, follow the JavaScript integration guide to load the SDK, create the shared client module, and configure the TypeScript declarations. This page covers only Vue 3-specific initialization and usage.

Integration Steps

Load the SDK from the root index.html, then preload it from the application entry point:

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import { preloadGeeGuard } from './geeGuardClient';

preloadGeeGuard().catch(function (error) {
  console.error('GeeLabGuard initialization failed:', error);
});

createApp(App).mount('#app');

Example business component:

<script setup>
import { ref } from 'vue';
import { getGeeToken } from './geeGuardClient';

const props = defineProps({ orderId: { type: String, required: true } });
const submitting = ref(false);
const error = ref('');

async function handleCheckout() {
  submitting.value = true;
  error.value = '';
  try {
    const { token, offline } = await getGeeToken();
    await fetch('/api/checkout', {
      method: 'POST',
      headers: { 'content-type': 'application/json' },
      body: JSON.stringify({
        orderId: props.orderId,
        gee_token: token,
        offline,
      }),
    });
  } catch (err) {
    error.value = err instanceof Error ? err.message : 'Failed to process the request';
  } finally {
    submitting.value = false;
  }
}
</script>

<template>
  <button type="button" :disabled="submitting" @click="handleCheckout">
    {{ submitting ? 'Processing…' : 'Submit order' }}
  </button>
  <p v-if="error" role="alert">{{ error }}</p>
</template>

Do not initialize the SDK separately from every component's onMounted(). Multiple pages should share the same client module.

Vue 3

Integration Steps

On this page