@openpolicy/vue

Vue components for rendering OpenPolicy documents at runtime.

@openpolicy/vue provides headless Vue components that compile and render policies directly from config.

Install

bun add @openpolicy/vue @openpolicy/sdk

Usage

// openpolicy.ts
import { ContractPrerequisite, defineConfig, LegalBases } from "@openpolicy/sdk";

export default defineConfig({
	company: {
		name: "Acme Inc.",
		legalName: "Acme Corporation",
		address: "123 Main St, Springfield, USA",
		contact: { email: "[email protected]" },
	},
	effectiveDate: "2026-01-01",
	jurisdictions: ["eu", "us-ca"],
	data: {
		collected: { "Account Information": ["Email", "Name"] },
		context: {
			"Account Information": {
				purpose: "To create and manage user accounts",
				lawfulBasis: LegalBases.Contract,
				retention: "Until account deletion",
				provision: ContractPrerequisite("We cannot create or operate your account."),
			},
		},
	},
	cookies: {
		used: { essential: true, analytics: false, marketing: false },
		context: {
			essential: { lawfulBasis: LegalBases.LegalObligation },
			analytics: { lawfulBasis: LegalBases.Consent },
			marketing: { lawfulBasis: LegalBases.Consent },
		},
	},
	thirdParties: [],
});

// App.ts
import openpolicy from "./openpolicy";
import { OpenPolicy, PrivacyPolicy } from "@openpolicy/vue";

export default {
	components: { OpenPolicy, PrivacyPolicy },
	template: `
		<OpenPolicy :config="openpolicy">
			<PrivacyPolicy />
		</OpenPolicy>
	`,
	data() {
		return { openpolicy };
	},
};

Exports

• OpenPolicy
• PrivacyPolicy
• CookiePolicy
• renderDocument

Links

• GitHub
• openpolicy.sh