Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

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: about 23 hours ago
JSON representation

Vue Cookieconsent

Awesome Lists containing this project

README 

        
# vue-cookieconsent-component



> Vue Cookieconsent



[![npm](https://img.shields.io/npm/v/vue-cookieconsent-component.svg?style=for-the-badge)](https://www.npmjs.com/package/vue-cookieconsent-component)

[![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)

[![npm](https://img.shields.io/npm/dt/vue-cookieconsent-component.svg?style=for-the-badge)](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

```