01
Install the packages
pnpm add @pact/web @pact/runtime02
Install the bootstrap
This is the enforcement boundary. Keep it server-rendered and before optional code.
typescript
import { renderPactBootstrap } from '@pact/web'
const pactBootstrap = renderPactBootstrap({
siteKey: 'site_live_your_key',
src: '/pact.js',
apiBase: '/v1',
})
// Render pactBootstrap as trusted HTML at the start of <head>.
// It must appear before analytics, advertising, or other optional code.03
Wire Nuxt
ts
export default defineNuxtConfig({
vue: {
compilerOptions: {
isCustomElement: tag => tag.startsWith('pact-'),
},
},
})04
app.vue
vue
<script setup lang="ts">
import { PACT_BOOTSTRAP, definePactElements } from '@pact/web'
useHead({ script: [{
id: 'pact-bootstrap',
'data-tenant': 'site_live_your_key',
'data-src': '/pact.js',
'data-api': '/v1',
innerHTML: PACT_BOOTSTRAP,
}] })
onMounted(() => definePactElements())
</script>
<template>
<NuxtPage />
<pact-preferences-button>Privacy choices</pact-preferences-button>
</template>