README

:warning: Note This project is in status: work in progress

:warning: Note This documentation is in the making

Cookiefy for Vue

A minimal Cookie Managenent UI for Vue.js

Navigation

Cookiefy for Vue
- Navigation
- Features
- Vuex
- Installation
- Usage
  - Vue.js
  - Nuxt.js
- Props
- Custom fields
- Events
  - Response Structure
- Custom Language

Features

🎨 Cookie banner overlay UI
🎨 Information overlay UI
👨‍⚖️ GDPR compliant:
- ✅ Opt-in
- ✅ Easy to deny
🧠 Cookiefy remembers if it has been accepted and won't popup every reload
- ✅ Sets a COOKIEFY_SEEN Cookie to true
- ✅ Is an essential Cookie and is also GDPR compliant
🎨 Customizable fields for cookies & privacy
🎨 Customizable color
✨ You let Cookiefy handle the UI - you just handle the results

Vuex

Cookiefy uses Vuex Store to handle state. Vuex has to be installed or Cookiefy wont work. For Vue.js you can use the Vue CLI to add Vuex with one command:

vue add vuex

Installation

npm install vue-cookiefy

Usage

Vue.js

First go to your main.js file and register Cookiefy

// main.js
import Vue from 'vue'
import Cookiefy from 'vue-cookiefy'

Vue.use(Cookiefy)

Then you can add Cookiefy in any of your components

// YourComponent.vue
<template>
  <div>
    <Cookiefy 
      v-model="cookiefy" 
    />
  </div>
</template>
<script>

export default {
  name: 'YourComponent',
  
  data() {
    return {
      cookiefy: true,
    }
  },
}
</script>

Nuxt.js

For Nuxt.js we will create a simple plugin to inject the Cookiefy component into your app. First create a file named cookiefy.js in your @/plugins folder.

// @/plugins/cookiefy.js
import Vue from 'vue'
import Cookiefy from 'vue-cookiefy'

Vue.use(Cookiefy)

Then register the plugin in your Nuxt.js configuration file nuxt.config.js

// nuxt.config.js 
export default {
  // ...
  plugins: [
    '@/plugins/cookiefy.js'
  ],
  // ...
}

Now you can use <Cookiefy /> in any of your components.

Props

Prop	Type	Default	Description
`cookieField`	`Array`	`[]`	Containing the fields to select showed in the cookie overlay
`privacyData`	`Array`	`[]`	Contains the title and fields showed in the privacy overlay
`innerText`	`String`	Placeholder	Set the user information about the cookie usage on your app
`color`	`String`	`#ff3d17`	Primary color of the elements
`lang`	`Object`	English	Language of elements - see here

Custom fields

You can easily define your cookies and privacy text as fields using the cookieFields & privacyFields props.

// YourComponent.vue
<template>
  <div>
    <Cookiefy 
      v-model="cookiefy"
      :cookieFields="cookieFields"
      :privacyFields="privacyFields"
    />
  </div>
</template>
<script>
  export default {
    name: 'YourComponent',
    
    data() {
      return {
        cookiefy: true,
        cookieFields: [
          {
            text: 'Essential Cookies',
            checked: true,
            readonly: true,
          },
          {
            text: 'Google Analytics',
            checked: true,
            readonly: true,
          },
        ],
        privacyFields: [
          {
            title: 'Essential Cookies',
            text:
              'Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio id sed quas corporis...',
          },
          {
            title: 'Google Analytics',
            text:
              'Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio id sed quas corporis...',
          },
        ],
      }
    },
  }
</script>

Events

Event	Description	Return
`@accept`	On user clicks accept	Returns an `Array` which contains all fields and results of the user selection

<template>
  <div>
    <Cookiefy 
      // ...
      @accept="onAccept" 
    />
  </div>
</template>

<script>
  export default {
    name: 'YourComponent',

    // ...
    
    methods: {
      // this method is called when the user accepts 
      onAccept(fields) {
        // handle response here
      }
    },
  }
</script>

Response Structure

The @accept event returns all defined fields as an Array.

// The returned Array of fields is structured like this
[
  {
    text: 'Essential Cookies', 
    checked: true,
  },
  {
    text: 'Google Analytics', 
    checked: true
  },
  // ...
]

Now after you got the user response you can set your Cookies safely.

Custom Language

You can easily change the language/text of the elements by using the lang prop.

<template>
  <div>
    <Cookiefy 
      // ...
      :lang="lang"
    />
  </div>
</template>

<script>
  export default {
    name: 'YourComponent',
    
    data() {
      return {
        // ...
        lang: {
          acceptAll: 'Alle akzeptieren',
          asSelected: 'Wie Auswahl',
          info: 'Mehr',
          close: 'Schließen',
          infoTitle: 'Informationen',
        },
      },
    }
</script>

Usage no npm install needed!