c15t
Deploy on Inth

Vue Components

ConsentDialogLink

Import ConsentDialogLink from c15t/vue/vue-plugin and put it in your footer, next to your privacy policy link:

src/App.vue
<script setup lang="ts">
import { ConsentDialogLink, ConsentRoot } from 'c15t/vue/vue-plugin';
</script>

<template>
	<ConsentRoot />
	<main>
		<h1>c15t with Vue</h1>
		<p>PostHog loads after you allow measurement.</p>
	</main>
	<footer>
		<ConsentDialogLink>Privacy settings</ConsentDialogLink>
	</footer>
</template>

Pass content in the default slot to change the label. The embed example uses it inside a placeholder as "Choose video permissions".

ConsentDialogLink renders one button that sets activeUI to 'manager', which opens the preference dialog. It matches ConsentDialogLink in the React adapter. It has no props. The default label is the consentManagerDialog.title translation, "Privacy Settings" in English. The link shows it in the visitor's language once init has delivered copy, and in English until then. Its default slot replaces the label.

The button renders only while the visitor has somewhere to go:

  • It is absent until the visitor's policy has resolved.
  • It is absent when the policy owes no consent UI, such as a policy with no prompt and no rights.

The link opens the dialog only if something renders ConsentManager. ConsentRoot does.

Accessibility and styling

The component is a native button with type="button", so it works with Enter and Space and has no link semantics. Style it with your own classes on the element: attributes you pass, such as class, go to the button. It carries data-testid="consent-dialog-link" and data-c15t-rights, the policy's rights separated by spaces.

Verify

Load the page under a policy that asks for consent and click Privacy Settings. The preference dialog opens. Under a policy with no prompt and no rights, the button is absent from the DOM.

Next steps