Vue Cookies Consent

Nice and clean component to display message about cookies in Vue and Nuxt.js

• 🎬 Demo

📦 Installation

NPM

npm install --save @norvikit/vue-cookies-consent

Yarn

yarn add @norvikit/vue-cookies-consent

🚀 Usage in Vue Components

<template>
  <vue-cookies-consent>
    <template #title>Some default title for window</template>
    <template #description>
      <p>Some description in window</p>
    </template>
    <template #button>Accept cookies</template>
  </vue-cookies-consent>
</template>

<script>
  import VueCookiesConsent from '@norvikit/vue-cookies-consent'
  export default {
    components: {
      VueCookiesConsent
    }
  }
</script>

🚀 Usage throughout the Vue project

Add this content to main.js

import Vue from "vue";
import VueCookiesConsent from "@norvikit/vue-cookies-consent";
Vue.use(VueCookiesConsent)

🚀 Usage in Nuxt.js

Create a file plugins/vue-cookies-consent.js with the following content:

import Vue from "vue";
import VueCookiesConsent from "@norvikit/vue-cookies-consent";
Vue.use(VueCookiesConsent)

Then add plugin to nuxt.config.js

plugins: [
    {
      src:"plugins/vue-cookies-consent.js", mode:'client'
    }
]

And add component to your code:

<template>
  <client-only>
    <vue-cookies-consent>
      <template #title>Some default title for window</template>
      <template #description>
        <p>Some description in window</p>
      </template>
      <template #button>Accept cookies</template>
    </vue-cookies-consent>
  </client-only>
</template>

🔧 Props

Prop	Type	Description	Example
colorTitle	String	Color of window title	color-title="#000000"
colorDescription	String	Color of window description	color-description="#000000"
colorButton	String	Color of button text	color-button="#FFFFFF"
backgroundWindow	String	Background of window	background-window="#FFFFFF"
backgroundButton	String	Background of button	background-button="#C11E31"
backgroundButtonHover	String	Background of button on hover state	background-button-hover="#de2b40"
hasShadow	Boolean	Window has shadow	:has-shadow="true"
borderRadius	Number	Border radius of window in px	:border-radius="16"
offsetY	Number	Offset of window by Y in px	:offset-y="16"
offsetX	Number	Offset of window by X in px	:offset-x="16"
position	String	Position of window: top or bottom	position="top"
saveMethod	String	Method to save window state after accept: ls or cookies	save-method="cookies"

🔧 Events

Event	Description	Example
shown	Fired after window is shown	@shown="someMethod"
accept	Fired after accept button is clicked	@accept="someMethod"
lsSaved	Fired after window state saved to localStorage	@ls-saved="someMethod"
cookiesSaved	Fired after window state saved to Cookies	@cookies-saved="someMethod"
hidden	Fired after window is hidden	@hidden="someMethod"