vue-cookieconsent-component
Vue Cookieconsent
Demo
Install
npm install vue-cookieconsent-component or yarn add vue-cookieconsent-component
Usage
The most common use case is to register the component globally.
// in your main.js or similar file import Vue from 'vue' import cookieconsent from 'vue-cookieconsent-component' Vue.component('cookie-consent', cookieconsent)Alternatively you can do this to register the components:
// HelloWorld.vue import CookieConsent from 'vue-cookieconsent-component' export default { name: 'HelloWorld', components: { CookieConsent } }On your page you can now use html like this:
// see slots or props if you want to extend something <cookie-consent/>CSS
// required and to get updates @import "./node_modules/vue-cookieconsent-component/src/scss/cookie-consent"; // example or use it @import "./node_modules/vue-cookieconsent-component/src/scss/cookie-consent-bottom"; @import "./node_modules/vue-cookieconsent-component/src/scss/cookie-consent-transition";Do you like my theme but not the colors or paddings, ...?
// overwrite variables $cookieconstent-padding: 1rem; $cookieconstent-space: .7rem; $cookieconstent-compliance-padding: .5rem 2rem; // find more variables in /src/scss/_cookie-consent-variables.scss @import "./node_modules/vue-cookieconsent-component/src/scss/cookie-consent";Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
| transition | String | false | cookie-consent-transition | Transition name |
| message | String | false | This website uses... | Main message |
| linkLabel | String | false | Learn more | Link label |
| buttonLabel | String | false | Got it! | Button label |
| href | String | false | http://cookiesandyou.com | Target link |
| target | String | false | _blank | New window |
| rel | String | false | noopener | Referrer Policy |
| cookieName | String | false | cookieconsent_status | Cookie name |
| cookiePath | String | false | / | Cookie path |
| cookieDomain | String | false | '' | Cookie domain |
| cookieExpiryDays | Number | false | 365 | Cookie expiry days |
Slots
| Name | Description |
|---|---|
| message | Message and link |
| link | Only the link |
| button | Only the button |
Slots example
Create your own content
<cookie-consent> <template slot="message" > This website uses cookies <a class="btn btn-link" href="#">Read more</a> </template> <template slot="button" > <button class="btn btn-info">Accept</button> </template> </cookie-consent>Build Setup
# install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view the bundle analyzer report npm run build --report # run unit tests npm run unit # run all tests npm test
