[{"data":1,"prerenderedAt":131},["ShallowReactive",2],{"search-api":3},[4,11,19,28,36,45,54,62,68,73,79,87,100,108,116],{"id":5,"path":6,"dir":7,"title":8,"description":7,"keywords":9,"body":10},"content:0.index.md","/","","Cookiebot composable for your Vue / Nuxt Application",[],"     Use the power of Cookiebot in your Vue / Nuxt application.   Welcome to the Vue Cookiebot plugin documentation.     Easy setup  Supports Vue and Nuxt projects  Trigger the   consent banner  and the   cookie declaration  Supports culture / language options with   vue-i18n  or   @nuxtjs/i18n .  Access functionality through easy-to-use composable       // Vendor\n   import   { cookieBot }   from   '@ambitiondev/vue-cookiebot'  ;\n   import   { createApp }   from   'vue'  ;\n   \n   // Components\n   import   App   from   './App.vue'  ;\n   \n   const   app   =   createApp  (App);\n   \n   app.  use  (cookieBot, {\n     cookieBotId:   'COOKIEBOT_ID_HERE'  ,\n   });\n   \n   app.  mount  (  '#app'  );\n     export   default   defineNuxtConfig  ({\n     modules: [  \"@ambitiondev/nuxt-cookiebot\"  ],\n     cookiebot: {\n       cookieBotId:   'COOKIEBOT_ID_HERE'  ,\n     },\n   });\n    What's included      Vue Composable   Adding Cookiebot functionality is a breeze!    Nuxt Composable   Using Nuxt? Use the composable in the same way!    i18n supported   Support for both   vue-i18n  and   @nuxtjs/i18n  html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":12,"path":13,"dir":14,"title":15,"description":16,"keywords":17,"body":18},"content:1.introduction:1.welcome.md","/introduction/welcome","introduction","Welcome","You're reading the docs of the Cookiebot composable for Vue and Nuxt projects. This project is MIT-licensed.",[],"  Welcome  You're reading the docs of the Cookiebot composable for Vue and Nuxt projects. This project is   MIT-licensed .  For more information about Cookiebot, please consult   their website .",{"id":20,"path":21,"dir":14,"title":22,"description":23,"keywords":24,"body":27},"content:1.introduction:2.structure.md","/introduction/structure","Project Structure","This cookiebot package is available for both Vue and Nuxt. You can access their usage guides in the side menu, or by clicking the desired framework.",[25,26],"Vue","Nuxt","  Project Structure  This cookiebot package is available for both Vue and Nuxt. You can access their usage guides in the side menu, or by clicking the desired framework.  Vue       The documentation for Vue can be found   here .  Nuxt       The documentation for Nuxt can be found   here .",{"id":29,"path":30,"dir":31,"title":32,"description":33,"keywords":34,"body":35},"content:2.vue:1.installation.md","/vue/installation","vue","Installation","Install the package through your favorite package manager:",[],"  Installation  Install the package through your favorite package manager:      npm   install   @ambitiondev/vue-cookiebot\n     yarn   install   @ambitiondev/vue-cookiebot\n     pnpm   install   @ambitiondev/vue-cookiebot\n   ✨ That's all there is to it! You can now continue to the   global configuration step  html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":37,"path":38,"dir":31,"title":39,"description":40,"keywords":41,"body":44},"content:2.vue:2.configuration.md","/vue/configuration","Configuration","Now that the Cookiebot package is installed, we need to add some global configuration to your app.",[42,43],"Basic installation","Advanced configuration","  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:      // Vendor\n   import   { cookieBot }   from   '@ambitiondev/vue-cookiebot'  ;\n   import   { createApp }   from   'vue'  ;\n   \n   // Components\n   import   App   from   './App.vue'  ;\n   \n   const   app   =   createApp  (App);\n   \n   app.  use  (cookieBot, {\n       cookieBotId:   'MY_COOKIEBOT_ID'  ,\n   });\n   \n   app.  mount  (  '#app'  );\n  .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 .      /// \u003C  reference   types  =  \"vite/client\"   />\n   \n   interface   ImportMetaEnv   {\n       readonly   VITE_COOKIEBOT_ID  :   string  ;\n   }\n   \n   interface   ImportMeta   {\n       readonly   env  :   ImportMetaEnv  ;\n   }\n     // Vendor\n   import   { cookieBot }   from   '@ambitiondev/vue-cookiebot'  ;\n   import   { createApp }   from   'vue'  ;\n   \n   // Components\n   import   App   from   './App.vue'  ;\n   \n   const   app   =   createApp  (App);\n   \n   app.  use  (cookieBot, {\n       cookieBotId:   import  .  meta  .env.  VITE_COOKIEBOT_ID  ,\n   });\n   \n   app.  mount  (  '#app'  );\n  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      // Vendor\n   import   { cookieBot }   from   '@ambitiondev/vue-cookiebot'  ;\n   import   { createApp }   from   'vue'  ;\n   \n   // Components\n   import   App   from   './App.vue'  ;\n   \n   const   app   =   createApp  (App);\n   \n   app.  use  (cookieBot, {\n       cookieBotId:   'MY_COOKIEBOT_ID'  ,\n       culture:   'en'\n   });\n   \n   app.  mount  (  '#app'  );\n  html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":46,"path":47,"dir":31,"title":48,"description":49,"keywords":50,"body":53},"content:2.vue:3.usage.md","/vue/usage","Usage","Now that your Cookiebot plugin has been configured, let's see how we can use it.",[51,52],"Consent Banner","Cookie declaration","  Usage  Now that your Cookiebot plugin has been configured, let's see how we can use it.  The Cookiebot composable has two major functionalities: the   consent banner  and the   cookie declaration . Here's how you can use them:  Consent Banner  The consent banner is the popup that appears when (first) visiting the site. It will prompt the visiter to either accept or reject cookies of choice.  To add the consent banner to your app, simply do:      \u003C  script setup lang  =  \"ts\"  >\n       // Vendor\n       import   { useCookiebot }   from   '@ambitiondev/vue-cookiebot'  ;\n       import   { onMounted }   from   'vue'  ;\n   \n       // Composable\n       const   {   consentBanner   }   =   useCookiebot  ();\n   \n       consentBanner  ();\n   \u003C/  script  >\n   \n   \u003C  template  >\n       \u003C!--   template goes here   -->\n   \u003C/  template  >\n  Cookie declaration  The cookie declaration generates your configured policy from the Cookiebot control center, as well as a possibility for visitors to adjust their cookie preferences. It can be used as follows:      \u003C  script setup lang  =  \"ts\"  >\n       // Vendor\n       import   { useCookiebot }   from   '@ambitiondev/vue-cookiebot'  ;\n       import   { onMounted, ref }   from   'vue'  ;\n   \n       // Refs\n       const   cookieDeclarationRef   =   ref  \u003C  HTMLDivElement   |   null  >(  null  );\n   \n       // Composable\n       const   {   cookieDeclaration   }   =   useCookiebot  ();\n   \n       onMounted  (()   =>   {\n           cookieDeclaration  (cookieDeclarationRef);\n       });\n   \u003C/  script  >\n   \n   \u003C  template  >\n       \u003C  div ref  =  \"cookieDeclarationRef\"  >  \u003C/  div  >\n   \u003C/  template  >\n  html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":55,"path":56,"dir":31,"title":57,"description":58,"keywords":59,"body":61},"content:2.vue:4.advanced-usage.md","/vue/advanced-usage","Advanced Usage","Each instance of the Cookiebot composable can be configured and thus using app configuration / stateful logic to enhance your Cookiebot implementation. For example, you can use vue-i18n to localize the content of your Cookiebot features.",[60],"Vue-i18n example","  Advanced Usage  Each instance of the Cookiebot composable can be configured and thus using app configuration / stateful logic to enhance your Cookiebot implementation.   For example, you can use   vue-i18n  to localize the content of your Cookiebot features.   For a full list of options, consult the   api reference .  Vue-i18n example      \u003C  script setup lang  =  \"ts\"  >\n       // Vendor\n       import   { useCookiebot }   from   '@ambitiondev/vue-cookiebot'  ;\n       import   { onMounted, ref }   from   'vue'  ;\n       import   { useI18n }   from   'vue-i18n'  ;\n   \n       // Refs\n       const   cookieDeclarationRef   =   ref  \u003C  HTMLDivElement   |   null  >(  null  );\n   \n       // Composable\n       const   {   locale   }   =   useI18n  ();\n       const   {   cookieDeclaration   }   =   useCookiebot  ({\n           culture: locale.value,\n       });\n   \n       onMounted  (()   =>   {\n           cookieDeclaration  (cookieDeclarationRef);\n       });\n   \u003C/  script  >\n   \n   \u003C  template  >\n       \u003C  div ref  =  \"cookieDeclarationRef\"  >  \u003C/  div  >\n   \u003C/  template  >\n  html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":63,"path":64,"dir":65,"title":32,"description":33,"keywords":66,"body":67},"content:3.nuxt:1.installation.md","/nuxt/installation","nuxt",[],"  Installation  Install the package through your favorite package manager:      npm   install   @ambitiondev/nuxt-cookiebot\n     yarn   install   @ambitiondev/nuxt-cookiebot\n     pnpm   install   @ambitiondev/nuxt-cookiebot\n   ✨ That's all there is to it! You can now continue to the   global configuration step  html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":69,"path":70,"dir":65,"title":39,"description":40,"keywords":71,"body":72},"content:3.nuxt:2.configuration.md","/nuxt/configuration",[42],"  Configuration  Now that the Cookiebot package is installed, we need to add some global configuration to your app.   Don't forget to regenerate the .nuxt folder after installation and .env alteration!  Basic installation  The Cookiebot ID is configured via Nuxt's   runtime config , which keeps it out of your build and allows it to be overridden at runtime via environment variables.     export   default   defineNuxtConfig  ({\n     modules: [  \"@ambitiondev/nuxt-cookiebot\"  ],\n     cookiebot: {},\n     runtimeConfig: {\n       public: {\n         cookiebot: {\n           id:   'COOKIEBOT_ID_HERE'  ,\n         },\n       },\n     },\n   });\n  .env usage  Nuxt automatically maps   NUXT_PUBLIC_*  environment variables to   runtimeConfig.public . You can set your Cookiebot ID without touching   nuxt.config.ts :      NUXT_PUBLIC_COOKIEBOT_ID  =  supersecret\n     export   default   defineNuxtConfig  ({\n     modules: [  \"@ambitiondev/nuxt-cookiebot\"  ],\n     cookiebot: {},\n     runtimeConfig: {\n       public: {\n         cookiebot: {\n           id:   ''  ,   // overridden by NUXT_PUBLIC_COOKIEBOT_ID at runtime\n         },\n       },\n     },\n   });\n   The   runtimeConfig.public.cookiebot.id  key is automatically registered by the module. You only need to declare it in your config if you want to set a default value.  html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":74,"path":75,"dir":65,"title":48,"description":49,"keywords":76,"body":78},"content:3.nuxt:3.usage.md","/nuxt/usage",[77,52],"Consent banner","  Usage  Now that your Cookiebot plugin has been configured, let's see how we can use it.  The Cookiebot composable has two major functionalities: the   consent banner  and the   cookie declaration . Here's how you can use them:   Using   nuxt-i18n ? The locale will be used to set the culture prop for your Cookiebot implementation.  Consent banner  For basic usage, nothing else has to be done! Just follow the example from the   configuration step .  The consent banner will be triggered automatically, unless the   autoConsentBanner  option is set to  false  in the Nuxt config file. To override consent banner settings, head over to the   advanced usage  section.  Cookie declaration  The cookie declaration generates your configured policy from the Cookiebot control center, as well as a possibility for visitors to adjust their cookie preferences. Nuxt auto-imports the composable for you, so you don't have to import it explicitly.  It can be used as follows:      \u003C  script setup lang  =  \"ts\"  >\n       const   cookieDeclarationRef   =   ref  \u003C  HTMLElement   |   null  >(  null  );\n   \n       const   {   cookieDeclaration   }   =   useCookiebot  ();\n   \n       onMounted  (()   =>   {\n           cookieDeclaration  (cookieDeclarationRef);\n       });\n   \u003C/  script  >\n   \n   \u003C  template  >\n       \u003C  div ref  =  \"cookieDeclarationRef\"   />\n   \u003C/  template  >\n  html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":80,"path":81,"dir":65,"title":57,"description":82,"keywords":83,"body":86},"content:3.nuxt:4.advanced-usage.md","/nuxt/advanced-usage","Each instance of the Cookiebot composable can be configured and thus using app configuration / stateful logic to enhance your Cookiebot implementation.",[84,85],"Overriding consent banner settings for Cookiebot in composable","Blocking mode example","  Advanced Usage  Each instance of the Cookiebot composable can be configured and thus using app configuration / stateful logic to enhance your Cookiebot implementation.   For a full list of options, consult the   api reference .   Setting culture from   nuxt-i18n  is done automatically.  Overriding consent banner settings for Cookiebot in composable      \u003C  script setup lang  =  \"ts\"  >\n       const   {   consentBanner   }   =   useCookiebot  ({\n           // Add your custom options here\n           level:   'implied'\n       });\n   \n       // Make sure to load the consent banner in the root!\n       // Do not implement in onMounted hook\n       consentBanner  ();\n   \u003C/  script  >\n   \n   \u003C  template  >\n       \u003C!--   templating here   -->\n   \u003C/  template  >\n     export   default   defineNuxtConfig  ({\n       modules: [  \"@ambitiondev/nuxt-cookiebot\"  ],\n       cookiebot: {\n           // disable auto consent banner when overriding with composable\n           autoConsentBanner:   false  ,\n       },\n       runtimeConfig: {\n           public: {\n               cookiebot: {\n                   id:   \"COOKIEBOT_ID_HERE\"  ,\n               },\n           },\n       },\n   });\n  Blocking mode example      \u003C  script setup lang  =  \"ts\"  >\n       const   cookieDeclarationRef   =   ref  \u003C  HTMLElement   |   null  >(  null  );\n   \n       const   {   cookieDeclaration   }   =   useCookiebot  ({\n           blockingMode:   'auto'\n       });\n   \n       onMounted  (()   =>   {\n           cookieDeclaration  (cookieDeclarationRef);\n       });\n   \u003C/  script  >\n   \n   \u003C  template  >\n       \u003C  div ref  =  \"cookieDeclarationRef\"   />\n   \u003C/  template  >\n  html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":88,"path":89,"dir":90,"title":91,"description":92,"keywords":93,"body":99},"content:4.api:1.options.md","/api/options","api","Configuration options","Fore more info, consult the Cookiebot docs",[94,95,96,97,98],"blockingMode","consentmode","culture","level","type","  Configuration options  Fore more info, consult the   Cookiebot docs  blockingMode  •   blockingMode :   \"auto\"  |   \"none\"  Defines if Cookiebot should automatically block all cookies until a user has consented, value: “auto”.\nIf not, (value: “none”) cookie-setting scripts should manually be marked up as described in our\nmanual implementation guide. If you omit this attribute, behavior will equal value: “none”.   consentmode  •   consentmode :   boolean  Allows you to disable Google Consent Mode   culture  •   culture :   string  Sets the language for the Cookiebot implementation   level  •   level :   \"implied\"  |   \"strict\"  Overrides the default consent method with one of the following values: “implied”, “strict”   type  •   type :   \"optin\"  |   \"optout\"  |   \"optinout\"  |   \"leveloptin\"  |   \"inlineoptin\"  |   \"optionaloptin\"  Overrides the default dialog type with one of the following values:\n“optin”, “optout”, “optinout”, “leveloptin”, “inlineoptin”, “optionaloptin”",{"id":101,"path":102,"dir":90,"title":103,"description":104,"keywords":105,"body":107},"content:4.api:2.vue-plugin.md","/api/vue-plugin","Vue Plugin options","Plugin options are identical to the configuration options with the exception of the usage of a mandatory cookieBotId.",[106],"cookieBotId required","  Vue Plugin options  Plugin options are identical to the   configuration options  with the exception of the usage of a mandatory   cookieBotId .   cookieBotId   required  •   cookieBotId :   string  Set the API / domain key for your Cookiebot instance. ",{"id":109,"path":110,"dir":90,"title":111,"description":112,"keywords":113,"body":115},"content:4.api:3.nuxt-plugin.md","/api/nuxt-plugin","Nuxt Plugin options","Plugin options are identical to the Vue plugin options with the exception of the usage of an optional autoConsentBanner.",[114],"autoConsentBanner","  Nuxt Plugin options  Plugin options are identical to the   Vue plugin options  with the exception of the usage of an optional   autoConsentBanner .   autoConsentBanner  •   autoConsentBanner :   boolean  Configure if the consent banner should be shown automatically. Defaults to   true .\nOverride this behaviour if you would like to add stateful logic to the consent banner.  Locale from   nuxt-i18n  is detected automatically to set culture for your Cookiebot implementation. ",{"id":117,"path":118,"dir":90,"title":119,"description":120,"keywords":121,"body":130},"content:4.api:4.composable.md","/api/composable","useCookiebot()","The API for the composable works the same for Vue and Nuxt alike.",[122,123,124,125,126,127,128,129],"consentBanner","consentPage Deprecated","cookieDeclaration","destroyConsentBanner","destroyConsentPage Deprecated","destroyCookieDeclaration","renew","resetConsentBanner","  useCookiebot()  The API for the composable works the same for Vue and Nuxt alike.  Al these properties are available inside the   useCookiebot  composable.  consentBanner  •   consentBanner : () =>   Promise \u003C  void >  Create script tag for the consent banner and append it to body  Returns   Promise \u003C  void >   consentPage   Deprecated  •   consentPage : (  ref :   MaybeRef \u003C  null  |   HTMLElement >) =>   Promise \u003C  void >  Method to append cookie declaration content to a given HTML element    Param  HTML element or HTML element ref where the script should be injected    Deprecated  Please use   cookieDeclaration  instead  Parameters \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n     Name  Type  Description     ref   MaybeRef \u003C  null  |   HTMLElement >  HTML element or HTML element ref where the script should be injected  Returns   Promise \u003C  void >    Deprecated  Please use   cookieDeclaration  instead   cookieDeclaration  •   cookieDeclaration : (  ref :   MaybeRef \u003C  null  |   HTMLElement >) =>   Promise \u003C  void >  Method to append cookie declaration content to a given HTML element    Param  HTML element or HTML element ref where the script should be injected  Parameters \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n     Name  Type  Description     ref   MaybeRef \u003C  null  |   HTMLElement >  HTML element or HTML element ref where the script should be injected  Returns   Promise \u003C  void >   destroyConsentBanner  •   destroyConsentBanner : () =>   Promise \u003C  void >  Destroy the consent banner script from the body  Returns   Promise \u003C  void >   destroyConsentPage   Deprecated  •   destroyConsentPage : (  ref :   MaybeRef \u003C  null  |   HTMLElement >) =>   Promise \u003C  void >  Method to destroy script for cookie declaration    Param  HTML element or HTML ref where the script has been injected    Deprecated  Please use   destroyCookieDeclaration  instead  Parameters \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n     Name  Type  Description     ref   MaybeRef \u003C  null  |   HTMLElement >  HTML element or HTML ref where the script has been injected  Returns   Promise \u003C  void >    Deprecated  Please use   destroyCookieDeclaration  instead   destroyCookieDeclaration  •   destroyCookieDeclaration : (  ref :   MaybeRef \u003C  null  |   HTMLElement >) =>   Promise \u003C  void >  Method to destroy script for cookie declaration    Param  HTML element or HTML ref where the script has been injected  Parameters \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n     Name  Type  Description     ref   MaybeRef \u003C  null  |   HTMLElement >  HTML element or HTML ref where the script has been injected  Returns   Promise \u003C  void >   renew  •   renew : () =>   void  Trigger the consent banner to change already given consent  Returns   void   resetConsentBanner  •   resetConsentBanner : () =>   Promise \u003C  void >  Destroys the consent banner and reinitialises it.  Returns   Promise \u003C  void >",1785315873061]