vue-gdpr

Installation

npm install @nextindex/vue-gdpr --save

Notice

vue-gdpr is internally using dynamic import() statements to load the corrisponding langauge.json with the law text. As how webpack works, it will create vendor chunks because of the import(). Which sounds generally good, because it reduces the bundle size. However, webpack can't properly resolve these imports later in the project where you are using this lib. It will try to fetch the chunks based on the publicPath which in most project will be simply / . But the chunks are not automatically copied into it. So the loading of the chunks fails.

Currently the only workaround I've found is to publish the source files and let the user import the vue components from the source files. Which also means that bundling / transpiling needs to be done in user-land.

GitHub Issue: https://github.com/webpack/webpack/issues/11127

Setup

// THIS IS CURRENTLY NOT WORKING. SEE https://github.com/webpack/webpack/issues/11127
import { GDPRSidebar, GDPRContent } from '@nextindex/vue-gdpr'

Workaround

import GDPRSidebar from '@nextindex/vue-gdpr/src/components/GDPRSidebar.vue'
import GDPRContent from '@nextindex/vue-gdpr/src/components/GDPRContent.vue'

Components

• <GDPRSidebar />
• <GDPRContent />

Props

GDPRContent

| Prop | Type | Default Value | Description |----------|:-------------:|------|------| | lang | String | de | GDRP Language. Currently supported: de | | citations | Boolean | true | Show / Hide citations | | recitals | Boolean | true | Show / Hide recitals |

GDPRSidebar

| Prop | Type | Default Value | Description |----------|:-------------:|------|------| | lang | String | de | GDRP Language. Currently supported: de | | collapsible | Boolean | false | Enable/Disable Collapible sidebar items |

Slots

GDPRSidebar

<GDPRSidebar>
    <template v-slot:chapter="{ chapter }">
        <h1>{{ chapter.title }}</h1>
    </template>
</GDPRSidebar>

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Run your unit tests

npm run test:unit

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.