{"id":15295015,"url":"https://github.com/evodiaaut/vue-cookieconsent-component","last_synced_at":"2025-04-13T04:09:05.848Z","repository":{"id":44480199,"uuid":"131303561","full_name":"EvodiaAut/vue-cookieconsent-component","owner":"EvodiaAut","description":"Vue Cookieconsent","archived":false,"fork":false,"pushed_at":"2023-08-13T16:51:00.000Z","size":217,"stargazers_count":96,"open_issues_count":0,"forks_count":15,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-13T04:09:01.296Z","etag":null,"topics":["component","cookieconsent","javascript","vue","vue-component","vue2","vuejs","vuejs2"],"latest_commit_sha":null,"homepage":"https://evodiaaut.github.io/vue-cookieconsent-component","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/EvodiaAut.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"custom":"https://liberapay.com/EvodiaAut"}},"created_at":"2018-04-27T13:59:02.000Z","updated_at":"2025-03-28T07:57:14.000Z","dependencies_parsed_at":"2025-01-01T21:11:45.499Z","dependency_job_id":"7aeb85a7-a7f1-4d98-8cb4-9bb4f2b7765e","html_url":"https://github.com/EvodiaAut/vue-cookieconsent-component","commit_stats":{"total_commits":17,"total_committers":2,"mean_commits":8.5,"dds":0.05882352941176472,"last_synced_commit":"1d94816cc4bb81e8eb208685e6f78f2995a39401"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EvodiaAut%2Fvue-cookieconsent-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EvodiaAut%2Fvue-cookieconsent-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EvodiaAut%2Fvue-cookieconsent-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EvodiaAut%2Fvue-cookieconsent-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/EvodiaAut","download_url":"https://codeload.github.com/EvodiaAut/vue-cookieconsent-component/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248661705,"owners_count":21141450,"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":["component","cookieconsent","javascript","vue","vue-component","vue2","vuejs","vuejs2"],"created_at":"2024-09-30T17:08:18.373Z","updated_at":"2025-04-13T04:09:05.822Z","avatar_url":"https://github.com/EvodiaAut.png","language":"JavaScript","funding_links":["https://liberapay.com/EvodiaAut"],"categories":[],"sub_categories":[],"readme":"# vue-cookieconsent-component\n\n\u003e Vue Cookieconsent\n\n[![npm](https://img.shields.io/npm/v/vue-cookieconsent-component.svg?style=for-the-badge)](https://www.npmjs.com/package/vue-cookieconsent-component)\n[![license](https://img.shields.io/github/license/mashape/apistatus.svg?style=for-the-badge)](https://github.com/EvodiaAut/vue-cookieconsent-component/blob/master/LICENSE.md)\n[![npm](https://img.shields.io/npm/dt/vue-cookieconsent-component.svg?style=for-the-badge)](https://www.npmjs.com/package/vue-cookieconsent-component)\n\n[Inspired by cookieconsent](https://github.com/insites/cookieconsent/)\n\n## Demo\n\n[Demo here](https://evodiaaut.github.io/vue-cookieconsent-component/)\n\n## Install\n\n`npm install vue-cookieconsent-component` or `yarn add vue-cookieconsent-component`\n\n## Usage\n\nThe most common use case is to register the component globally.\n\n```js\n// in your main.js or similar file\nimport Vue from 'vue'\nimport cookieconsent from 'vue-cookieconsent-component'\n\nVue.component('cookie-consent', cookieconsent)\n```\n\nAlternatively you can do this to register the components:\n\n```js\n// HelloWorld.vue\nimport CookieConsent from 'vue-cookieconsent-component'\n\nexport default {\n  name: 'HelloWorld',\n  components: {\n    CookieConsent\n  }\n}\n```\n\nOn your page you can now use html like this:\n\n```html\n// see slots or props if you want to extend something\n\u003ccookie-consent/\u003e\n```\n\n## CSS\n\n```scss\n// required and to get updates\n@import \"./node_modules/vue-cookieconsent-component/src/scss/cookie-consent\";\n// example or use it\n@import \"./node_modules/vue-cookieconsent-component/src/scss/cookie-consent-bottom\";\n@import \"./node_modules/vue-cookieconsent-component/src/scss/cookie-consent-transition\";\n```\n\nDo you like my theme but not the colors or paddings, ...?\n\n```scss\n// overwrite variables\n$cookieconstent-padding: 1rem;\n$cookieconstent-space: .7rem;\n$cookieconstent-compliance-padding: .5rem 2rem;\n// find more variables in /src/scss/_cookie-consent-variables.scss\n\n@import \"./node_modules/vue-cookieconsent-component/src/scss/cookie-consent\";\n```\n\n## Props\n\n|Prop|Type|Required|Default|Description\n|-|-|-|-|-|\n|transition|String|false|cookie-consent-transition|Transition name\n|message|String|false|This website uses...|Main message\n|linkLabel|String|false|Learn more|Link label\n|buttonLabel|String|false|Got it!|Button label\n|href|String|false|http://cookiesandyou.com|Target link\n|target|String|false|_blank|New window\n|rel|String|false|noopener|Referrer Policy\n|cookieName|String|false|cookieconsent_status|Cookie name\n|cookiePath|String|false|/|Cookie path\n|cookieDomain|String|false|''|Cookie domain\n|cookieExpiryDays|Number|false|365|Cookie expiry days\n\n## Slots\n\n|Name|Description\n|-|-|\n|message|Message and link\n|link|Only the link\n|button|Only the button\n\n## Slots example\n\nCreate your own content\n\n```html\n\u003ccookie-consent\u003e\n  \u003ctemplate\n    slot=\"message\"\n  \u003e\n    This website uses cookies\n    \u003ca class=\"btn btn-link\" href=\"#\"\u003eRead more\u003c/a\u003e\n  \u003c/template\u003e\n  \u003ctemplate\n    slot=\"button\"\n  \u003e\n    \u003cbutton class=\"btn btn-info\"\u003eAccept\u003c/button\u003e\n  \u003c/template\u003e\n\u003c/cookie-consent\u003e\n```\n\n## Build Setup\n\n``` bash\n# install dependencies\nnpm install\n\n# serve with hot reload at localhost:8080\nnpm run dev\n\n# build for production with minification\nnpm run build\n\n# build for production and view the bundle analyzer report\nnpm run build --report\n\n# run unit tests\nnpm run unit\n\n# run all tests\nnpm test\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fevodiaaut%2Fvue-cookieconsent-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fevodiaaut%2Fvue-cookieconsent-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fevodiaaut%2Fvue-cookieconsent-component/lists"}