vcc

vue-cookieconsent-component

Vue Cookieconsent

Showing:

Popularity

Downloads/wk

891

GitHub Stars

94

Maintenance

Last Commit

2yrs ago

Contributors

1

Package

Dependencies

1

Size (min+gzip)

0.2KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Readme

vue-cookieconsent-component

Vue Cookieconsent

npm license npm

Inspired by cookieconsent

Demo

Demo here

Install

npm install vue-cookieconsent-component or yarn add vue-cookieconsent-component

Usage

The most common use case is to register the component globally.

// 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:

// HelloWorld.vue
import CookieConsent from 'vue-cookieconsent-component'

export default {
  name: 'HelloWorld',
  components: {
    CookieConsent
  }
}

On your page you can now use html like this:

// see slots or props if you want to extend something
<cookie-consent/>

CSS

// 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, ...?

// 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

PropTypeRequiredDefaultDescription
transitionStringfalsecookie-consent-transitionTransition name
messageStringfalseThis website uses...Main message
linkLabelStringfalseLearn moreLink label
buttonLabelStringfalseGot it!Button label
hrefStringfalsehttp://cookiesandyou.comTarget link
targetStringfalse_blankNew window
relStringfalsenoopenerReferrer Policy
cookieNameStringfalsecookieconsent_statusCookie name
cookiePathStringfalse/Cookie path
cookieDomainStringfalse''Cookie domain
cookieExpiryDaysNumberfalse365Cookie expiry days

Slots

NameDescription
messageMessage and link
linkOnly the link
buttonOnly the button

Slots example

Create your own content

<cookie-consent>
  <template
    slot="message"
  >
    This website uses cookies
    <a class="btn btn-link" href="#">Read more</a>
  </template>
  <template
    slot="button"
  >
    <button class="btn btn-info">Accept</button>
  </template>
</cookie-consent>

Build Setup

# 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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Tutorials

No tutorials found
Add a tutorial