Show a banner with text, a decline button, and an accept button on your page. Remembers selection using cookies. Emits an event with current selection on creation. Good for GDPR requirements or telling your users something that they can act on and then not see again.
# npm npm i vue-cookie-accept-decline #yarn yarn add vue-cookie-accept-decline
Or you can include it through the browser at the bottom of your page along with the css:
<!-- Please note if you're using the browser method you're going to want to adjust the version number as needed. -->
We needed a component to show a privacy banners on pages - came across the awesome vue-cookie-law by apertureless and it was almost what was needed, except we needed to track the option of an opt-out/decline which seemed a bit out of scope for that project - so
vue-cookie-accept-decline is the result.
The big difference here is that
When the decline or accept buttons are clicked, they will emit the events
clicked-declined respectively. Also, on creation, the component will emit a
status event with a value of the current setting,
null for nothing set,
accept for an accepted banner, and
decline for a declined banner. You can listen to this event on the component and do something like disable cookies if you see they have declined the banner. The component also has an optional
postpone close button that will let the users dismiss the message without selecting an option.
Each instance of the component requires the prop of
elementId - this is to allow for the use of multiple instances of
vue-cookie-accept-decline on the same page. To delete the cookie for a specific instance, set the
ref property on your instance and call the exposed
removeCookie method like this:
this.$refs.myPanel1.removeCookie(). You can then call
this.$refs.myPanel1.init() to show the user the panel again. See the demo page for a detailed example.
<!-- css import for when you want to import the component css into your css file/files -->@import '/path/to/node_modules/vue-cookie-accept-decline.css';<!-- css import for when you're importing the css directly in your js -->import 'vue-cookie-accept-decline/dist/vue-cookie-accept-decline.css'import VueCookieAcceptDecline from 'vue-cookie-accept-decline'Vue.component('vue-cookie-accept-decline', VueCookieAcceptDecline)
|ref||String||no||none||Any String||Unique string that gives you control over the component|
|elementId||string||yes||none||Any String||The unique id for the instance. This string will be appened to the string 'vue-cookie-accept-decline-' to allow for multiple components.|
|debug||boolean||no||false||true, false||If true, the cookie is never saved, only the events will be emitted|
|position||string||no||bottom||For floating: bottom-left, bottom-right, top-left, top-right -- For bar: bottom, top||Position of the banner|
|type||string||no||floating||floating, bar||Type of banner|
|disableDecline||boolean||no||false||true, false||If true, the 'opt out' button is not shown|
|transitionName||string||no||slideFromBottom||slideFromBottom, slideFromTop, fade||Banner animation type|
|showPostponeButton||boolean||no||false||true, false||Optionally show a close button that allows the user to postpone selecting an option.|
|forceCookies||boolean||no||false||true, false||Optionally force cookies storage|
|status||'accept', 'decline', 'postpone', null||Event will be emitted when component is created.|
|clicked-accept||none||Event will be emitted when accept is clicked on the banner.|
|clicked-decline||none||Event will be emitted when declined is clicked on the banner.|
|clicked-postpone||none||Event will be emitted when postponed is clicked on the banner.|
|removed-cookie||none||Event will be emitted when the cookie has been removed using the
There are slots for your own custom
acceptContent, this is good for providing your own link or whatever HTML content you want in your message/buttons - like icons.
Note - call these methods through the
ref you set up with your component. Example:
|removeCookie||none||Used to delete the unique cookie for the instance you are acting on.|
|init||none||Evaluates the cookie status and shows the panel if proper conditions are met. Useful for re-showing the panel after someone uses the
// Bar style}}}}}}}}}// Floating style}}}}}}}}}}}}
# install dependenciesnpm install# serve with hot reloadnpm run watch# run the testsnpm run test# build demo pagenpm run build:example# build librarynpm run build:library# build everything and run testsnpm run build
Go ahead and fork the project! Submit an issue if needed. Have fun!