c15tVue plugin

Install the plugin

Import c15tVue from c15t/vue/vue-plugin and pass it to app.use() in src/main.ts:

import { posthog } from '@c15t/integrations/posthog';
import { c15tVue, hosted } from 'c15t/vue/vue-plugin';
import { createApp } from 'vue';

import App from './App.vue';

createApp(App)
	.use(c15tVue, {
		mode: hosted(),
		scripts: [
			posthog({
				id: 'phc_your_project_key',
				initOptions: { cookieless_mode: 'never' },
				loadMode: 'after-consent',
			}),
		],
	})
	.mount('#app');

c15t/vue is the Nuxt module, not a Vue plugin. Passing it to app.use() does nothing useful. The quickstart covers consentManifest(), the Vite plugin that supplies the backend URL to hosted().

What the plugin does

app.use(c15tVue, options) creates one consent runtime for the app and provides it to every component. It also adds your tokens to document.head in a <style id="c15t-css-vars"> element, before the first render. Nothing else runs in the browser until the root component mounts. Then the plugin, in order:

1. Reads the visitor's stored choice from the c15t cookie and localStorage.
2. Applies Global Privacy Control when the browser sends it.
3. Starts the script loader for scripts, clear-on-revocation, the network blocker and the iframe blocker.
4. Resolves the visitor's policy with the mode you passed: from the backend's /init with hosted(), from the manifest in the browser with manifest(), or from local rules with offline().
5. With the iab option set, loads the IAB TCF module once a policy uses the iab model.

Until the policy arrives, every optional category is denied, so gated scripts and iframes wait. On Vue 3.5 and later, app.unmount() stops every module and removes the token style element. Composables called outside this app throw [c15t] Kernel not found.

Options

mode is required unless you pass a runtime; every other option is optional. Options that hold functions, such as scripts and callbacks, work here because the plugin runs in the browser.

Policy source

The backend URL, a custom fetch and the save domain are options of the mode, not the plugin:

hosted() and manifest() throw when they have no backend URL: add consentManifest() to vite.config.ts and set VITE_C15T_BACKEND_URL (or VITE_INTH_PROJECT_URL), or pass backendURL.

Scripts and blocking

Events and other tools

Appearance

Advanced

Verify

Open the app with the Network tab open. hosted() requests the backend's /init. manifest() with a bundled snapshot makes no policy request unless the policy needs a location the browser doesn't have, and manifest({ source: 'runtime' }) requests ${backendURL}/manifest. In the Application panel, a c15t cookie appears after you accept or reject.