cookie consent vue+vite
Cookie Consent for Vue JS (Version 3 Compatible)
Allows or deletes cookies. There are config files to change the design and add the relevant cookies.
A lightweight JavaScript plugin to handle cookie consent.
Recommended IDE Setup
VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).
Customize configuration
See Vite Configuration Reference.
Project Setup
npm install
Compile and Hot-Reload for Development
npm run dev
Compile and Minify for Production
npm run build
NPM Settings
npm i cookie-consent-mv
import {App} from 'cookie-consent-mv'
<template>
<App :datas = "datas" />
</template>
Required for datas config settings. It is also a props.
You can change the fields you see. is the config file
An example setup for datas props;
datas: {
cookie_project_name: 'cookie_consent',
current_lang: 'tr',
languages: {
'tr': {
consent_modal: {
title: 'We use cookies!',
description: 'Hello, this website tracks cookies to understand the cookies necessary to make it work properly and how you interact with it. The latter is determined only after approval.',
primary_btn: {
text: 'ACCEPT ALL'
},
secondary_btn: {
text: 'SETTINGS'
}
},
settings_modal: {
title: "Cookies",
description: "I use cookies to provide basic functionality of the website and improve your online experience. You can choose to join/exit at any time for each category. For more details regarding cookies and other sensitive data, please read the full privacy policy.",
save_settings_btn: 'Save Settings',
accept_all_btn: 'Accept All',
reject_all_btn: 'Reject All',
blocks: [
{
title: "Strictly necessary cookies",
description: "These cookies are necessary for my website to work properly. Without these cookies the website will not function properly.",
value: 'necessary',
enabled: true,
readonly: true,
cookies: [
{
name: "cookie1",
enabled: true,
readonly: true,
},
{
name: "cookie2",
enabled: true,
readonly: true,
}
]
},
{
title: "Performance and Analytics cookies",
description: "These cookies allow the website to remember choices you have made in the past.",
value: 'performance',
enabled: false,
readonly: false,
cookies: [
{
name: "cookie3",
enabled: false,
readonly: false,
},
{
name: "cookie4",
enabled: false,
readonly: false,
}
]
},
{
title: "Advertising and Targeting cookies",
description: `
These cookies collect information about how you use the website, which pages you visit and which links you click. All data is anonymous and cannot be used to identify you
`,
value: 'targeting',
enabled: false,
readonly: false,
cookies: [
{
name: "cookie5",
enabled: false,
readonly: false
},
{
name: "cookie6",
enabled: false,
readonly: false
}
]
}
]
}
}
}
}
CSS
@import url(../node_modules/cookie-consent-mv/dist/style.css);
Note : this is a required css. cannot be changed
Customize CSS
:root {
--font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial;
--modal-font-size : 16px;
--consent-modal-bg :
--settings-modal-bg :
--consent-modal-font-size : 14px;
--consent-modal-width : 400px;
--text-title-description-color:
--btn-bg-secondary:
--btn-bg-secondary-hover:
--btn-text-secondary-color:
--btn-bg-primary:
--btn-bg-primary-hover:
--btn-text-primary-color:
--overlay-bg: rgba(4, 6, 8, 0.8);
--cookie-category-block:
--cookie-category-block-bg-hover:
--cookie-category-block-text :
--switch-bg:
--switch-bg-active:
--bg-disable:
--bg-close :
--bg-close-hover :
}
Note : You can make edits in this css
![2](https://user-images.githubusercontent.com/10594349/177137789-dd7fc0f3-9e6e-473a-a469-451dcefde952.png)