Gathering detailed insights and metrics for vue-cookie-law
Gathering detailed insights and metrics for vue-cookie-law
Gathering detailed insights and metrics for vue-cookie-law
Gathering detailed insights and metrics for vue-cookie-law
npm install vue-cookie-law
💎 Release new version 1.13.2
Published on 31 Mar 2020
💎 Release new version 1.13.1
Published on 31 Mar 2020
💎 Release new version 1.13.0
Published on 30 Mar 2020
💎 Release new version 1.12.0
Published on 14 Feb 2020
💎 Release new version 1.11.0
Published on 01 Nov 2019
💎 Release new version 1.10.0
Published on 18 Mar 2019
Module System
Min. Node Version
Typescript Support
Node Version
NPM Version
379 Stars
114 Commits
43 Forks
8 Watching
2 Branches
18 Contributors
Updated on 23 Nov 2024
JavaScript (68.77%)
Vue (30.68%)
HTML (0.55%)
Cumulative downloads
Total Downloads
Last day
28.4%
2,248
Compared to previous day
Last week
1.3%
11,312
Compared to previous week
Last month
2.7%
47,503
Compared to previous month
Last year
-7.6%
378,318
Compared to previous year
1
56
EU Cookie Law Plugin for Vue.js
📺 Demo
yarn add vue-cookie-law
1 2<template> 3 <footer> 4 <cookie-law theme="dark-lime"></cookie-law> 5 </footer> 6</template> 7 8<script> 9 import CookieLaw from 'vue-cookie-law' 10 export default { 11 components: { CookieLaw } 12 } 13</script>
You can also pass in the message into a named slot. This way you can for example add <router-link>
and other dynamic content.
1<cookie-law> 2 <div slot="message"> 3 Here is my message for more info <router-link to="legal-notes">Click here</router-link> 4 </div> 5</cookie-law>
For a more complex layout use the scoped slot
1<cookie-law> 2 <div slot-scope="props"> 3 <button class="skew" @click="props.accept"><span>I accept</span></button> 4 <p> 5 This site uses 🍪 6 </p> 7 <button class="skew" @click="props.close"><span>Ignore me</span></button> 8 </div> 9 10</cookie-law>
methods | description |
---|---|
accept | Closes the cookie disclaimer and saves to localStorage |
close | Only closes the cookie disclaimer. The disclaimer will reappear on the next page load. |
open | Show disclaimer if user ignored him |
revoke | Revoke previous user decision |
isAccepted | To check anytime if cookies has been accepted |
prop | default | type | description |
---|---|---|---|
buttonText | 'Got It!' | String | 🔘 Well, its the button text |
buttonLink | String|Object | Link to more infos. Simple href or a vue-router Location object | |
buttonLinkText | 'More info' | String | Label of link button |
buttonLinkNewTab | false | Boolean | If true, it opens the link in a new tab/window (href) |
buttonClass | 'Cookie__button' | String | Custom class name for buttons |
message | 'This website uses cookies to ensure you get the best experience on our website.' | String | Your message in the content area |
theme | 'base' | String | Selected theme. You can also create a custom one |
position | 'bottom' | String | Possible positions are bottom or top |
transitionName | 'slideFromBottom' | String | Enter and leave transitions. Currently supported slideFromBottom , slideFromTop , fade |
storageName | 'cookie:accepted' | String | Name for the localStorage / cookie name. Defaults to cookie:accepted |
storageType | 'localStorage' | String | Type of storage, where to store 'cookies:accept': true. Can be localStorage (default) or cookies . If LocalStorage is unsupported, then used Cookies. |
cookieOptions | {} | Object | (Optional) The cookieOptions parameter is an object. And its property can be a valid cookie option, such as path , domain , expires / max-age , samesite or secure . See tiny-cookie docs for details. |
buttonDecline | false | Boolean | Display decline button |
buttonDeclineText | 'Decline' | String | 🔘Decline button text |
buttonDeclineClass | 'Cookie__button--decline' | String | Custom class name for decline button |
The default button will emit an accept
event you can listen on if the user clicks the button.
1<cookie-law v-on:accept="ThankYouMethod()"/>
You can easy create your own themes. The classes that need to be styled are:
.Cookie
for the container.Cookie__content
for the content with message.Cookie__button
for the buttonIf you create your own theme, postfix the class.
1.Cookie--mytheme {....} 2.Cookie--mytheme .Cookie__button {....} 3.Cookie--mytheme div.Cookie__button:hover {....}
And then pass your theme name to the component.
Details changes for each release are documented in the CHANGELOG.md.
Please make sure to read the Issue Reporting Checklist before opening an issue. Issues not conforming to the guidelines may be closed immediately.
Please make sure to read the Contributing Guide and Code of Conduct before making a pull request.
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
Reason
Found 10/30 approved changesets -- score normalized to 3
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
Reason
project is not fuzzed
Details
Reason
branch protection not enabled on development/release branches
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Reason
81 existing vulnerabilities detected
Details
Score
Last Scanned on 2024-11-25
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More