DevTools

Load DevTools only in development

The module does not register ConsentDevTools. Import it from c15t/vue/devtools with a dynamic import that runs only in development:

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

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

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

Render this component anywhere in your app, such as app.vue. import.meta.dev is false in production builds, so the dynamic import and the panel stay out of your production bundle. A static import would ship DevTools to every visitor even when v-if hides it. The panel mounts in the browser only.

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.

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.

Open DevTools from the consent trigger

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

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

Inspect consent in Nuxt DevTools

In development, the module adds a c15t tab to Nuxt DevTools, so you don't need to render ConsentDevTools to inspect consent. Open Nuxt DevTools with Shift + Option + D (Shift + Alt + D on Windows and Linux) and choose c15t. The tab shows consent values, scripts, location, the resolved policy, IAB state, events and consent actions. It follows the DevTools light or dark theme.

Nuxt enables its DevTools by default in development. Production builds don't register the tab, its /__c15t_devtools__ page or the client plugin that exposes the kernel to it. To turn the tab off in development, set devtools: false:

export default defineNuxtConfig({
	modules: ['c15t/vue'],
	c15t: { devtools: false },
});

The tab's event history starts when you first open it. Nuxt DevTools keeps the tab loaded, so switching to another tab and back keeps the history. Saves and actions in the tab change the app's real consent state, as they would through the banner.

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 nuxt dev and open the app. A DevTools button appears in the corner you set. Open the Location panel and check the country the server resolved. Build with nuxt build, start the server and confirm the button does not appear.

Next steps

• Troubleshooting uses DevTools to explain a missing banner.
• Verify consent is the release checklist.