@dpa-it/dpa-id-partner-components-vue

Vue component of the dpa id partner components
26,807
Install
npm install @dpa-it/dpa-id-partner-components-vue
Latest Version:4.8.2
Vue:3
License:ISC
Last Updated:Sep 24, 2026
Links: npm
Maintainer: mridul_dpa

DPA-ID Partner Components vue library

Vue wrapper for the DPA ID partnmer components.

Install

To add the package to your project run

pnpm install @dpa-it/dpa-id-partner-components-vue

Usage

You can import the component like any other vue component.

<template>
  <DpaIdAppswitcher></DpaIdAppswitcher>
  <DpaIdUsericon></DpaIdUsericon>
</template>

<script setup>
import { DpaIdAppswitcher, DpaIdUsericon } from '@dpa-it/dpa-id-partner-components-vue';

</script>

Properties

Appswitcher

Property Attribute Description Type Default
arrowDistanceRight arrow-distance-right Distance of the arrow from the right border string '1rem'
backgroundColor background-color Color of the background string '#fff'
fontColor font-color Color of the font string 'rgb(33, 33, 33)'
iconColor icon-color Color of the icon string 'rgb(33, 33, 33)'
outerSize outer-size Inner size of the icon number 24
overlayRight overlay-right Distance of the overlay from the right border of the wrapper string '0'
overlayTop overlay-top Distance of the overlay from the bottom border of the wrapper string '30px'

UserIcon

Properties
Property Attribute Description Type Default
arrowDistanceRight arrow-distance-right Distance of the arrow from the right border string '1rem'
clientId client-id Auth0 client ID, needed for logout string ''
firstname firstname User firstname string ''
imgUrl img-url Profile picture of the user to be displayed string ''
initials initials User initials string ''
lastname lastname User lastname string ''
logoutLabel logout-label Button label to logout string 'Abmelden'
manageIdLabel manage-id-label Button label that links to the DPA ID management dashboard string 'dpa ID verwalten'
overlayRight overlay-right Distance of the overlay from the right border of the wrapper string '0px'
overlayTop overlay-top Distance of the overlay from the bottom border of the wrapper string '30px'
service service Service name (reflected to Useradmin myprofile URL as a parameter, if specified and not empty) string ''
size size Icon size number 24
stageAuth0 stage-auth-0 Stage of auth0 to refer to "dev" | "prod" | "staging" 'prod'
stageUseradmin stage-useradmin Stage of user-administration to refer to "dev" | "prod" | "staging" 'prod'
Events
Event Description Type
logout Event fired when clicking the logout button CustomEvent<void>
Methods
redirectToAuth0() => Promise<void>

redirects to the correct logout url of auth0

Returns

Type: Promise<void>

Version History

Version Released License
4.8.2 ISC
4.8.1 ISC
4.8.0 ISC
4.7.3 ISC
4.7.2 ISC
Pre-releases (30)
Version Released License
4.1.7-alpha.0 ISC
4.1.6-alpha.0 ISC
4.1.5-alpha.0 ISC
4.1.4-alpha.0 ISC
4.1.3-alpha.0 ISC