Configuration

Now that the Cookiebot package is installed, we need to add some global configuration to your app.

Basic installation

The basic and required configuration can be done as follows:

src/main.ts
// Vendor
import { cookieBot } from '@ambitiondev/vue-cookiebot';
import { createApp } from 'vue';

// Components
import App from './App.vue';

const app = createApp(App);

app.use(cookieBot, {
    cookieBotId: 'MY_COOKIEBOT_ID',
});

app.mount('#app');

.env usage (with Vite)

If you haven't done so already, create a .env.d.ts file in the root of your project.

Tip: More on .env usage with Vite can be found at the Vite docs website.
env.d.ts
/// <reference types="vite/client" />

interface ImportMetaEnv {
    readonly VITE_COOKIEBOT_ID: string;
}

interface ImportMeta {
    readonly env: ImportMetaEnv;
}
src/main.ts
// Vendor
import { cookieBot } from '@ambitiondev/vue-cookiebot';
import { createApp } from 'vue';

// Components
import App from './App.vue';

const app = createApp(App);

app.use(cookieBot, {
    cookieBotId: import.meta.env.VITE_COOKIEBOT_ID,
});

app.mount('#app');

Advanced configuration

There are some extra options that can be passed to the plugin instance. These will be configured as defaults used for all instances of the useCookiebot composable, unless they are overriden in a specific instance of the useCookiebot composable.

For a full list of options, consult the api reference.

Example: setting custom language on Cookiebot

src/main.ts
// Vendor
import { cookieBot } from '@ambitiondev/vue-cookiebot';
import { createApp } from 'vue';

// Components
import App from './App.vue';

const app = createApp(App);

app.use(cookieBot, {
    cookieBotId: 'MY_COOKIEBOT_ID',
    culture: 'en'
});

app.mount('#app');
Table of Contents