Skip to main content

Vue Scripts and embeds

Scripts

Register vendor scripts

A banner does not stop a script you load with a <script> tag in index.html or a vendor SDK you initialize yourself. Remove those loaders and register the vendor with c15t instead, so c15t loads it only while its category is allowed.

Pass the helpers from @c15t/integrations to the plugin as scripts:

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');

The plugin starts one script loader when the app mounts, after it has applied the visitor's stored choice and privacy signals. Do not also call createScriptLoader from a component. A component's onMounted runs before the plugin has read the stored choice, and each script would load twice.

Every vendor guide under integrations gives the helper and options for that vendor.

Embeds and other requests

Scripts cover vendor code c15t loads for you. For the rest:

  • Embeds gates iframes with ConsentGate or the iframe blocker.
  • Network blocker holds fetch and XHR calls that match a rule until their category is allowed.

Removing a script tag cannot stop code that already ran. When a save turns off a category or vendor that was allowed, c15t reloads the page so the new document starts with only permitted code. Set reloadOnConsentRevoked: false to handle revocation yourself, or use the onBeforeConsentRevocationReload callback to run code before the reload.

clearOnRevocation deletes first-party cookies and storage keys that belong to a category when it is withdrawn. See clear on revocation.

Let visitors turn off one vendor

A visitor can allow marketing and still switch off one vendor in it. Declare the vendors in the vendors option; helpers from @c15t/integrations already carry their vendor slug. See vendor consent.

Content Security Policy

Allow each vendor's script host in script-src. The plugin's nonce option adds a nonce to every script the loader creates. See Content Security Policy.

Verify gating

In a private window, open the Network tab and load the app under a policy that asks for consent. Requests to your vendors are absent. Allow one category and save, and only that category's vendors load. Withdraw it, and the page reloads without loading the vendor again. Verify consent has the full checklist.