Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/swiftxru/vue-cookies-consent
🔥 Nice and clean Vue component to display message about cookies
https://github.com/swiftxru/vue-cookies-consent
cookies cookies-law vue vue-component vuejs2
Last synced: 6 days ago
JSON representation
🔥 Nice and clean Vue component to display message about cookies
- Host: GitHub
- URL: https://github.com/swiftxru/vue-cookies-consent
- Owner: swiftxru
- License: mit
- Created: 2022-05-18T15:36:41.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-09-26T07:34:24.000Z (about 2 years ago)
- Last Synced: 2024-11-15T08:13:36.292Z (about 1 month ago)
- Topics: cookies, cookies-law, vue, vue-component, vuejs2
- Language: Vue
- Homepage: https://swiftxru.github.io/vue-cookies-consent/
- Size: 310 KB
- Stars: 8
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Vue Cookies Consent
Nice and clean component to display message about cookies in Vue and Nuxt.js
- 🎬 [Demo](https://swiftxru.github.io/vue-cookies-consent/)
## 📦 Installation
### NPM
`npm install --save @norvikit/vue-cookies-consent`
### Yarn
`yarn add @norvikit/vue-cookies-consent`
## 🚀 Usage in Vue Components
```vue
Some default title for window
Some description in window
Accept cookies
import VueCookiesConsent from '@norvikit/vue-cookies-consent'
export default {
components: {
VueCookiesConsent
}
}
```
## 🚀 Usage throughout the Vue project
Add this content to main.js
```js
import Vue from "vue";
import VueCookiesConsent from "@norvikit/vue-cookies-consent";
Vue.use(VueCookiesConsent)
```
## 🚀 Usage in Nuxt.js
Create a file `plugins/vue-cookies-consent.js` with the following content:
```js
import Vue from "vue";
import VueCookiesConsent from "@norvikit/vue-cookies-consent";
Vue.use(VueCookiesConsent)
```
Then add plugin to `nuxt.config.js`
```js
plugins: [
{
src:"plugins/vue-cookies-consent.js", mode:'client'
}
]
```
And add component to your code:
```vue
Some default title for window
Some description in window
Accept cookies
```
## 🔧 Props
| Prop | Type | Description | Example |
|-----------------------|---------|-------------------------------------------------------------|-------------------------------------|
| colorTitle | String | Color of window title | `color-title="#000000"` |
| colorDescription | String | Color of window description | `color-description="#000000"` |
| colorButton | String | Color of button text | `color-button="#FFFFFF"` |
| backgroundWindow | String | Background of window | `background-window="#FFFFFF"` |
| backgroundButton | String | Background of button | `background-button="#C11E31"` |
| backgroundButtonHover | String | Background of button on hover state | `background-button-hover="#de2b40"` |
| hasShadow | Boolean | Window has shadow | `:has-shadow="true"` |
| borderRadius | Number | Border radius of window in px | `:border-radius="16"` |
| offsetY | Number | Offset of window by Y in px | `:offset-y="16"` |
| offsetX | Number | Offset of window by X in px | `:offset-x="16"` |
| position | String | Position of window: `top` or `bottom` | `position="top"` |
| saveMethod | String | Method to save window state after accept: `ls` or `cookies` | `save-method="cookies"` |
## 🔧 Events
| Event | Description | Example |
|---------------|------------------------------------------------|-------------------------------|
| shown | Fired after window is shown | `@shown="someMethod"` |
| accept | Fired after accept button is clicked | `@accept="someMethod"` |
| lsSaved | Fired after window state saved to localStorage | `@ls-saved="someMethod"` |
| cookiesSaved | Fired after window state saved to Cookies | `@cookies-saved="someMethod"` |
| hidden | Fired after window is hidden | `@hidden="someMethod"` |