Vue

<script
  id="pact-bootstrap"
  data-tenant="site_live_your_key"
  data-src="/pact.js"
  data-api="/v1">
((e,r,o)=>{let a=location.search,c=(a.match(/region=(CA|TX|EU)/)||[,"CA"])[1],n=r.currentScript.dataset,t="1"==n.gpc||o.globalPrivacyControl||a.includes("gpc=1"),i=!t&&"EU"!=c&&"0"!=n.allow,l=n.src||"/pact.js",p=()=>import(l);(e.pact={ready:0,purposes:{marketing:i},gpc:!!t,region:c,on:()=>()=>0,allow:p,deny:p,openPreferences:p}).ready="TX"==c?Promise.resolve():p()})(window,document,navigator);
</script>

<script
  id="pact-bootstrap"
  data-tenant="site_live_your_key"
  data-src="/pact.js"
  data-api="/v1">
((e,r,o)=>{let a=location.search,c=(a.match(/region=(CA|TX|EU)/)||[,"CA"])[1],n=r.currentScript.dataset,t="1"==n.gpc||o.globalPrivacyControl||a.includes("gpc=1"),i=!t&&"EU"!=c&&"0"!=n.allow,l=n.src||"/pact.js",p=()=>import(l);(e.pact={ready:0,purposes:{marketing:i},gpc:!!t,region:c,on:()=>()=>0,allow:p,deny:p,openPreferences:p}).ready="TX"==c?Promise.resolve():p()})(window,document,navigator);
</script>
<div id="app"></div>

import vue from '@vitejs/plugin-vue'

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

import { definePactElements } from '@pact/web'

definePactElements()

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

<template>
  <pact-gate purpose="analytics">
    <analytics-dashboard></analytics-dashboard>
  </pact-gate>
  
  <pact-preferences-button>
    Privacy choices
  </pact-preferences-button>
</template>