{"id":13906741,"url":"https://github.com/apertureless/vue-cookie-law","last_synced_at":"2025-05-16T13:04:14.289Z","repository":{"id":37663804,"uuid":"84959433","full_name":"apertureless/vue-cookie-law","owner":"apertureless","description":"🍪 👮 Hackable EU Cookie Law Plugin for Vue.js","archived":false,"fork":false,"pushed_at":"2021-02-26T10:57:03.000Z","size":590,"stargazers_count":378,"open_issues_count":13,"forks_count":43,"subscribers_count":8,"default_branch":"develop","last_synced_at":"2024-10-12T08:49:23.570Z","etag":null,"topics":["cookie","cookie-law","eu-cookie","vue","vuejs","vuejs2"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/apertureless.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"code-of-conduct.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-03-14T14:36:33.000Z","updated_at":"2024-09-15T10:19:54.000Z","dependencies_parsed_at":"2022-09-04T21:00:14.649Z","dependency_job_id":null,"html_url":"https://github.com/apertureless/vue-cookie-law","commit_stats":null,"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apertureless%2Fvue-cookie-law","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apertureless%2Fvue-cookie-law/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apertureless%2Fvue-cookie-law/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apertureless%2Fvue-cookie-law/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/apertureless","download_url":"https://codeload.github.com/apertureless/vue-cookie-law/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247999859,"owners_count":21031046,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cookie","cookie-law","eu-cookie","vue","vuejs","vuejs2"],"created_at":"2024-08-06T23:01:41.646Z","updated_at":"2025-04-09T08:05:55.552Z","avatar_url":"https://github.com/apertureless.png","language":"JavaScript","funding_links":["https://ko-fi.com/C0C1WP7C","https://www.buymeacoffee.com/xcqjaytbl"],"categories":["JavaScript","UI组件","Components \u0026 Libraries","UI Components [🔝](#readme)","UI Components"],"sub_categories":["杂","UI Components","Miscellaneous"],"readme":"# 🍪 👮 Vue Cookie Law\n[![Build Status](https://travis-ci.org/apertureless/vue-cookie-law.svg?branch=develop)](https://travis-ci.org/apertureless/vue-cookie-law)\n[![npm](https://img.shields.io/npm/v/vue-cookie-law.svg)](https://www.npmjs.com/package/vue-cookie-law)\n[![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://vuejs.org/)\n[![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/apertureless/vue-cookie-law/blob/master/LICENSE)\n\n[![ko-fi](https://www.ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/C0C1WP7C)\n\n\nEU Cookie Law Plugin for Vue.js\n\n📺 [Demo](https://apertureless.github.io/vue-cookie-law/)\n\n## 🔧  Install\n`yarn add vue-cookie-law`\n\n## 👈 Usage\n\n```javascript\n\n\u003ctemplate\u003e\n  \u003cfooter\u003e\n    \u003ccookie-law theme=\"dark-lime\"\u003e\u003c/cookie-law\u003e\n  \u003c/footer\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  import CookieLaw from 'vue-cookie-law'\n  export default {\n    components: { CookieLaw }\n  }\n\u003c/script\u003e\n```\n\n## Slots\n\nYou can also pass in the message into a named slot. This way you can for example add `\u003crouter-link\u003e` and other dynamic content.\n\n```html\n\u003ccookie-law\u003e\n  \u003cdiv slot=\"message\"\u003e\n    Here is my message for more info \u003crouter-link to=\"legal-notes\"\u003eClick here\u003c/router-link\u003e\n  \u003c/div\u003e\n\u003c/cookie-law\u003e\n```\n\n## Scoped Slot\n\nFor a more complex layout use the **scoped slot**\n```html\n\u003ccookie-law\u003e\n  \u003cdiv slot-scope=\"props\"\u003e\n    \u003cbutton class=\"skew\" @click=\"props.accept\"\u003e\u003cspan\u003eI accept\u003c/span\u003e\u003c/button\u003e\n    \u003cp\u003e\n      This site uses 🍪\n    \u003c/p\u003e\n    \u003cbutton class=\"skew\" @click=\"props.close\"\u003e\u003cspan\u003eIgnore me\u003c/span\u003e\u003c/button\u003e\n  \u003c/div\u003e\n\n\u003c/cookie-law\u003e\n```\n| methods | description |\n|---|---|\n| accept | Closes the cookie disclaimer and saves to localStorage |\n| close | Only closes the cookie disclaimer. The disclaimer will reappear on the next page load. |\n| open | Show disclaimer if user ignored him |\n| revoke | Revoke previous user decision |\n| isAccepted | To check anytime if cookies has been accepted |\n\n## Props\n| prop | default | type | description\n|---|---|---|---|\n| buttonText | 'Got It!' | String | 🔘 Well, its the button text\n| buttonLink |  | String\\|Object | Link to more infos. Simple href or a [vue-router](https://github.com/vuejs/vue-router) Location object\n| buttonLinkText | 'More info' | String | Label of link button\n| buttonLinkNewTab | false | Boolean | If true, it opens the link in a new tab/window (href)\n| buttonClass | 'Cookie__button' | String | Custom class name for buttons\n| message | 'This website uses cookies to ensure you get the best experience on our website.' | String | Your message in the content area\n| theme | 'base' | String | Selected theme. You can also create a custom one\n| position | 'bottom' | String | Possible positions are `bottom` or `top`\n| transitionName | 'slideFromBottom' | String | Enter and leave transitions. Currently supported `slideFromBottom`, `slideFromTop`, `fade`\n| storageName | 'cookie:accepted' | String | Name for the localStorage / cookie name. Defaults to `cookie:accepted`\n| 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.\n| 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](https://github.com/Alex1990/tiny-cookie#setkey-value-options) for details.\n| buttonDecline | false | Boolean | Display decline button\n| buttonDeclineText | 'Decline' | String | 🔘Decline button text\n| buttonDeclineClass | 'Cookie__button--decline' | String | Custom class name for decline button\n\n\n## Events\n\nThe default button will emit an `accept` event you can listen on if the user clicks the button.\n\n```html\n\u003ccookie-law v-on:accept=\"ThankYouMethod()\"/\u003e\n```\n\n## 💅 Themes\n\n![Cookie Law Themes](static/cookie-law-themes.png)\n\n### Custom Themes\nYou can easy create your own themes. The classes that need to be styled are:\n\n- `.Cookie` for the container\n- `.Cookie__content` for the content with message\n- `.Cookie__button` for the button\n\nIf you create your own theme, postfix the class.\n\n```css\n.Cookie--mytheme {....}\n.Cookie--mytheme .Cookie__button {....}\n.Cookie--mytheme div.Cookie__button:hover {....}\n```\n\nAnd then pass your theme name to the component.\n\n## :scroll: Changelog\nDetails changes for each release are documented in the [CHANGELOG.md](https://github.com/apertureless/vue-cookie-law/blob/develop/CHANGELOG.md).\n\n\n## :exclamation: Issues\nPlease make sure to read the [Issue Reporting Checklist](https://github.com/apertureless/vue-cookie-law/blob/develop/CONTRIBUTING.md#issue-reporting-guidelines) before opening an issue. Issues not conforming to the guidelines may be closed immediately.\n\n\n## :muscle: Contribution\nPlease make sure to read the [Contributing Guide](https://github.com/apertureless/vue-cookie-law/blob/develop/CONTRIBUTING.md) and [Code of Conduct](code-of-conduct.md) before making a pull request.\n\n## :copyright: License\n\n[MIT](http://opensource.org/licenses/MIT)\n\n\u003ca href=\"https://www.buymeacoffee.com/xcqjaytbl\" target=\"_blank\"\u003e\u003cimg src=\"https://www.buymeacoffee.com/assets/img/custom_images/purple_img.png\" alt=\"Buy Me A Coffee\" style=\"height: auto !important;width: auto !important;\" \u003e\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapertureless%2Fvue-cookie-law","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fapertureless%2Fvue-cookie-law","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapertureless%2Fvue-cookie-law/lists"}