Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/johndatserakis/vue-cookie-accept-decline

👋 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 and on creation. Good for GDPR requirements.
https://github.com/johndatserakis/vue-cookie-accept-decline

accept banner cookie decline gdpr vue vue2 vue3 vuejs

Last synced: about 2 months ago
JSON representation

Host: GitHub
URL: https://github.com/johndatserakis/vue-cookie-accept-decline
Owner: johndatserakis
License: mit
Created: 2018-05-29T17:37:47.000Z (about 6 years ago)
Default Branch: develop
Last Pushed: 2022-08-30T03:16:16.000Z (almost 2 years ago)
Last Synced: 2024-04-05T03:15:59.596Z (2 months ago)
Topics: accept, banner, cookie, decline, gdpr, vue, vue2, vue3, vuejs
Language: Vue
Homepage: https://johndatserakis.github.io/vue-cookie-accept-decline/
Size: 1.57 MB
Stars: 145
Watchers: 7
Forks: 20
Open Issues: 3
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE

Lists

awesome-vue - vue-cookie-accept-decline - 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. (Components & Libraries / UI Components)

README

# vue-cookie-accept-decline

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.

## Vue 3 Support

Vue 3 is supported from `v6.0.0` and beyond (current `master`). To use `vue-cookie-accept-decline` with Vue 2, use `v5.4.0`.

## Links

- [Demo](https://johndatserakis.github.io/vue-cookie-accept-decline)
- [GitHub](https://github.com/johndatserakis/vue-cookie-accept-decline)
- [npm](https://www.npmjs.com/package/vue-cookie-accept-decline)

## Install

```
yarn add vue-cookie-accept-decline
```

Or you can include it through the browser at the bottom of your page along with the css:

```html

```

## About

We needed a component to show a privacy banners on pages - came across the awesome [vue-cookie-law](https://github.com/apertureless/vue-cookie-law) by [apertureless](https://github.com/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 `vue-cookie-accept-decline` allows the user to decline the text on the banner - this is important because you may want to _not_ uses cookies in your app if they have declined the oppurtunity to be tracked.

When the decline or accept buttons are clicked, they will emit the events `clicked-accept` and `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.

## Usage Example

```js
import { createApp } from 'vue';
import VueCookieAcceptDecline from 'vue-cookie-accept-decline';
import 'vue-cookie-accept-decline/dist/vue-cookie-accept-decline.css';

const app = createApp(App);

app.component('vue-cookie-accept-decline', VueCookieAcceptDecline);
```

```vue

We use cookies to ensure you get the best experience on our website.
Learn More...

Opt Out

Got It!

```

## Props

| prop | type | required | default | possible values | description |
| ------------------ | ------- | -------- | --------------- | ------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------- |
| 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 |

## Events

| event | value | description |
| ---------------- | ------------------------------------- | ----------------------------------------------------------------------------------------- |
| 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 `removeCookie()` method. |

## Slots

There are slots for your own custom `message`, `declineContent`, `acceptContent`, this is good for providing your own link or whatever HTML content you want in your message/buttons - like icons.

| name | default value |
| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
| message | We use cookies to ensure you get the best experience on our website. Learn More... |
| declineContent | Opt Out |
| acceptContent | Got It! |
| postponeContent | `×` |

## Methods

Note - call these methods through the `ref` you set up with your component. Example: `this.$refs.myPanel1.removeCookie()`.

| method | parameters | description |
| ------------ | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 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 `removeCookie` method. |

## SASS Structure

```sass
.cookie {
// Bar style
&__bar {
&--bottom {
}

&--top {
}

&__postpone-button {
}

&__content {
}

&__buttons {

&__button {
&--accept {
}

&--decline {
}
}
}
}

// Floating style
&__floating {
&--bottom-left {
}

&--bottom-right {
}

&--top-right {
}

&--top-left {
}

&__postpone-button {
}

&__content {
}

&__buttons {

&__button {
&--accept {
}

&--decline {
}
}
}
}
}
```

## Development

```bash
# Install dependencies
yarn

# Serve with hot reload
yarn dev

# Run the tests
yarn test

# Build demo page
yarn build:example

# Build library
yarn build:library

# Build everything and run tests
yarn build
```

## Thank You

Thank you [apertureless](https://github.com/apertureless) for [vue-cookie-law](https://github.com/apertureless/vue-cookie-law). Go check out `vue-cookie-law` and his other projects. Also, thank you [insites](https://github.com/insites) for [cookieconsent](https://github.com/insites/cookieconsent).

## Other

Go ahead and fork the project! Submit an issue if needed. Have fun!

## License

[MIT](http://opensource.org/licenses/MIT)