Vue
Vue
Render policies as headless Vue components with @openpolicy/vue
@openpolicy/vue provides headless Vue components that compile and render policies at runtime.
Installation
bun add @openpolicy/vue @openpolicy/sdkCreate your config
Create openpolicy.ts at the root of your project:
import { defineConfig } from "@openpolicy/sdk";
export default defineConfig({
company: {
name: "Acme Inc.",
legalName: "Acme Corporation",
address: "123 Main St, Springfield, USA",
contact: "privacy@acme.com",
},
privacy: {
effectiveDate: "2026-01-01",
dataCollected: {
"Account Information": ["Name", "Email address"],
},
legalBasis: "Legitimate interests and consent",
retention: { "Account data": "Until account deletion" },
cookies: { essential: true, analytics: false, marketing: false },
thirdParties: [],
userRights: ["access", "erasure"],
jurisdictions: ["us", "eu"],
},
});OpenPolicy provider
Wrap your app (or policy pages) with <OpenPolicy :config="...">:
<script setup lang="ts">
import { OpenPolicy, PrivacyPolicy } from "@openpolicy/vue";
import openpolicy from "./openpolicy";
</script>
<template>
<OpenPolicy :config="openpolicy">
<PrivacyPolicy />
</OpenPolicy>
</template>Components
<PrivacyPolicy /><TermsOfService /><CookiePolicy />
All components accept:
| Prop | Type | Description |
|---|---|---|
config | OpenPolicyConfig | *PolicyConfig | Override provider config for this component |
components | PolicyComponents | Custom Vue components for node types |
style | CSSProperties | Inline styles applied to the root wrapper |
Without a provider
Pass config directly:
<script setup lang="ts">
import { PrivacyPolicy } from "@openpolicy/vue";
import openpolicy from "./openpolicy";
</script>
<template>
<PrivacyPolicy :config="openpolicy" />
</template>