Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/evodiaaut/vue-cookieconsent-component
Vue Cookieconsent
https://github.com/evodiaaut/vue-cookieconsent-component
component cookieconsent javascript vue vue-component vue2 vuejs vuejs2
Last synced: 3 days ago
JSON representation
Vue Cookieconsent
- Host: GitHub
- URL: https://github.com/evodiaaut/vue-cookieconsent-component
- Owner: EvodiaAut
- License: mit
- Created: 2018-04-27T13:59:02.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-08-13T16:51:00.000Z (about 1 year ago)
- Last Synced: 2024-09-30T17:08:13.423Z (3 days ago)
- Topics: component, cookieconsent, javascript, vue, vue-component, vue2, vuejs, vuejs2
- Language: JavaScript
- Homepage: https://evodiaaut.github.io/vue-cookieconsent-component
- Size: 212 KB
- Stars: 99
- Watchers: 3
- Forks: 17
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
Awesome Lists containing this project
README
# vue-cookieconsent-component
> Vue Cookieconsent
[](https://www.npmjs.com/package/vue-cookieconsent-component)
[](https://github.com/EvodiaAut/vue-cookieconsent-component/blob/master/LICENSE.md)
[](https://www.npmjs.com/package/vue-cookieconsent-component)
[Inspired by cookieconsent](https://github.com/insites/cookieconsent/)
## Demo
[Demo here](https://evodiaaut.github.io/vue-cookieconsent-component/)
## Install
`npm install vue-cookieconsent-component` or `yarn add vue-cookieconsent-component`
## Usage
The most common use case is to register the component globally.
```js
// in your main.js or similar file
import Vue from 'vue'
import cookieconsent from 'vue-cookieconsent-component'
Vue.component('cookie-consent', cookieconsent)
```
Alternatively you can do this to register the components:
```js
// HelloWorld.vue
import CookieConsent from 'vue-cookieconsent-component'
export default {
name: 'HelloWorld',
components: {
CookieConsent
}
}
```
On your page you can now use html like this:
```html
// see slots or props if you want to extend something
```
## CSS
```scss
// required and to get updates
@import "./node_modules/vue-cookieconsent-component/src/scss/cookie-consent";
// example or use it
@import "./node_modules/vue-cookieconsent-component/src/scss/cookie-consent-bottom";
@import "./node_modules/vue-cookieconsent-component/src/scss/cookie-consent-transition";
```
Do you like my theme but not the colors or paddings, ...?
```scss
// overwrite variables
$cookieconstent-padding: 1rem;
$cookieconstent-space: .7rem;
$cookieconstent-compliance-padding: .5rem 2rem;
// find more variables in /src/scss/_cookie-consent-variables.scss
@import "./node_modules/vue-cookieconsent-component/src/scss/cookie-consent";
```
## Props
|Prop|Type|Required|Default|Description
|-|-|-|-|-|
|transition|String|false|cookie-consent-transition|Transition name
|message|String|false|This website uses...|Main message
|linkLabel|String|false|Learn more|Link label
|buttonLabel|String|false|Got it!|Button label
|href|String|false|http://cookiesandyou.com|Target link
|target|String|false|_blank|New window
|rel|String|false|noopener|Referrer Policy
|cookieName|String|false|cookieconsent_status|Cookie name
|cookiePath|String|false|/|Cookie path
|cookieDomain|String|false|''|Cookie domain
|cookieExpiryDays|Number|false|365|Cookie expiry days
## Slots
|Name|Description
|-|-|
|message|Message and link
|link|Only the link
|button|Only the button
## Slots example
Create your own content
```html
This website uses cookies
Read more
Accept
```
## Build Setup
``` bash
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report
# run unit tests
npm run unit
# run all tests
npm test
```