# Exports

import {
    VueGdprGuard,
    gdprMixin,
    
    GdprManager,
    GdprGroup,
    GdprGuard,
} from "vue-gdpr-guard"

# VueGdprGuard

This is the plugin that you need to register in order to use the components in your application, simply call

Vue.use(VueGdprGuard, config);
Config key type required
factory gdprGuard.GdprManagerFactory (opens new window) ✔️
savior gdprGuard.GdprSavior (opens new window) ✔️

TIP

It is recommended to use GdprManagerBuilder (opens new window) to create your managers. This is available to you through vue-gdpr-guard's dependency on gdpr-guard :

import {
    GdprManagerBuilder,
    GdprStorage,
    // [...]
} from "gdpr-guard"

As for factories, you can either construct the manager beforehand and make a simple function that returns it, or make a function that constructs it directly.

WARNING

GdprSavior instances are often objects that you construct using other libraries (e.g. gdpr-guard-local (opens new window)). Thus you might need to install additional libraries for this feature.

# gdprMixin

A handy mixin if you define all your GDPR template in one component. It registers all the components of this library, adds a opened boolean prop and a handful of handy methods to avoid boilerplate :

Method Return type Description
enableAll() void Enable all guards in the manager
disableAll() void Disable all guards in the manager
close() void Emit a close event (useful for modals)
discard() Promise<boolean> Discard the user's changes to the preferences
save() Promise<boolean> Save the user's changes to the preferences

# Vue Components

TIP

You can browse each components' documentation here

GdprManager, GdprGroup and GdprGuard are all renderless components, meaning that they don't actually render HTML of their own, instead they render the content from the default slot.

The only caveat of this approach is that, when rendering, the components will only take into account the first element of the slot :

<MyRenderlessComponent>
	<div class="a"></div>
	<div class="b"></div>
</MyRenderlessComponent>

will render to

<div class="a"></div>

This approach is used to adhere to the main focus of the library : Give the developers complete control over the rendering, ease the use of feature toggling based on GDPR preferences.

This way, you can use Antd, Bootstrap or whatever components you feel like using while still getting all the advantages from the domain-specific logic.