c15t
Deploy on Inth

Vue Components

DevTools

Load DevTools only in development

Import ConsentDevTools from c15t/vue/devtools with a dynamic import that runs only in development:

src/ConsentDevTools.vue
<script setup lang="ts">
import { defineAsyncComponent } from 'vue';

// Development builds only: the dynamic import keeps DevTools out of
// production bundles.
const DevTools = import.meta.env.DEV
	? defineAsyncComponent(() => import('c15t/vue/devtools'))
	: null;
</script>

<template>
	<DevTools v-if="DevTools" position="bottom-right" />
</template>

Render this component anywhere inside the app that installed the c15tVue plugin. import.meta.env.DEV is false in production builds, so Vite drops the dynamic import and the panel from your production bundle. A static import would ship DevTools to every visitor even when v-if hides it.

What ConsentDevTools renders

ConsentDevTools mounts a floating panel for the consent runtime your app already created. It renders nothing into your component tree and mounts its panel in document.body. It must render inside the app that set up c15t, or it throws [c15t] Kernel not found.

PanelWhat it shows
ConsentsEach category's value, with save, accept all and reject actions
ScriptsYour scripts, their loading status, and the scripts and iframes found in the page
LocationThe resolved country and region
PolicyThe resolved policy and presentation
IABVendors, purposes and the TC String, under an IAB policy
EventsA timeline of consent changes and script events
ActionsShow the banner, open preferences, hide consent UI, or resolve the policy again

Accept and reject in the Consents panel apply only to the categories the policy covers, filtered by consentCategories. Necessary stays on. DevTools and C15TDevTools are other names for the same component.

While ConsentDialogTrigger is visible, it becomes a two-button toolbar with a DevTools button, and DevTools hides its own floating launcher, so one control occupies the corner. The DevTools button sits at the end farthest from the trigger's corner. The panel opens just past the toolbar, aligned with its outer edge, and follows it when a visitor drags the toolbar to another corner. position applies again once no trigger is visible.

DevTools brings its launcher back whenever the trigger is hidden, for example while triggerShowWhen: 'after-consent' waits for a choice. A production build that loads DevTools only in development shows the single trigger button.

Props

PropTypeDefaultBehavior
position'top-left' | 'top-right' | 'bottom-left' | 'bottom-right''bottom-right'Corner of the toggle button.
defaultOpenbooleanfalseOpens the panel on load.
defaultTab'consents' | 'scripts' | 'location' | 'policy' | 'iab' | 'events' | 'actions''consents'Panel shown first.
maxEventsnumber100How many events the Events panel keeps.
getConsentCategories() => readonly ConsentCategory[]consentCategoriesNarrows the categories the Consents panel acts on. It cannot add categories outside the policy.
getPresentation() => ConsentPresentation | undefinedYour presentation optionPresentation the Policy panel resolves.
clearRecords() => voidClears the stored consent recordsRuns when you clear records from the panel.
shadowbooleantrueMounts the panel inside a shadow root that carries its own stylesheet, so your page's CSS cannot restyle it. :shadow="false" mounts the panel in the light DOM and adds its stylesheet to <head>.

Changing a prop destroys the panel and creates a new one, which clears its event history.

Embed the panel in your own page

ConsentDevToolsPanel from c15t/vue/devtools fills its parent element instead of floating over the page. It has no launcher or close button and starts open. Use it for your own debug page or another devtools host. Give the parent a height:

<script setup lang="ts">
import { ConsentDevToolsPanel } from 'c15t/vue/devtools';
</script>

<template>
  <div style="height: 32rem">
    <ConsentDevToolsPanel default-tab="events" />
  </div>
</template>

It accepts defaultTab, maxEvents, getConsentCategories, getPresentation and clearRecords, and must render inside the provider that supplies the kernel.

Verify

Run vite and open the app. A DevTools button appears in the corner you set. Open it, pick the Policy panel and check the matched policy for your location. Serve a production build with vite build and vite preview, and confirm the DevTools button does not appear.

Next steps