🧑‍💼 User Management Component (Vue 3)

A reusable, customizable Vue 3 component to manage users for a JHipster based backend: with pagination, dialogs, PrimeVue UI, Tailwind, and REST API integration.

📦 Installation

Install the package and required peer dependencies:

npm install user-management-vue vue primevue primeicons

🚀 Usage

1. Register the component as a plugin in nuxt: user-management.client.ts

import { defineNuxtPlugin } from '#app'
import UserManagementPlugin from 'user-management-vue'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(UserManagementPlugin)
})

2. Use in a template

<template>
  <UserManagement
    :roles="roles"
    :authorization-token="authToken"
    :api-config="apiConfig"
    :show-delete="true"
    :show-login="false"
  />
</template>

<script setup lang="ts">
const roles = {
  ROLE_USER: 'Gebruiker',
  ROLE_ADMIN: 'Beheerder',
  ROLE_SUPERADMIN: 'Superadmin'
}

const authToken = 'your-jwt-token'

const apiConfig = {
  baseUrl: 'https://api.example.com',
  endpoints: {
    fetch: '/users',
    save: '/users',
    delete: '/users'
  }
}
</script>

⚙️ Props

| Prop | Type | Required | Description | |--------------------|--------------------------------|----------|-------------| | roles | Record<string, string> | ✅ Yes | Maps backend role keys to display labels | | authorizationToken | string | ✅ Yes | Bearer token for API requests | | apiConfig | object | ✅ Yes | Contains the baseUrl and optional endpoint paths | | showDelete | boolean | ❌ No | Show the delete icon in the action column | | showLogin | boolean | ❌ No | Show the login field in the table and form |

🧩 Slots

extra-fields

Scoped slot rendered inside the create/edit dialog, between the role select and the activated toggle. Use it to inject application-specific form fields without making the library aware of them.

| Slot prop | Type | Description | |-----------|-----------|-------------| | user | object | The user object being created or edited. Mutate it directly; every field on it is included in the save payload and fields returned by the fetch endpoint round-trip automatically. | | isNew | boolean | true when creating a new user, false when editing. |

Example: an extra multi-select that only appears for a specific role.

<UserManagement :roles="roles" :authorization-token="authToken" :api-config="apiConfig">
  <template #extra-fields="{ user }">
    <MultiSelect
      v-if="user.authorities[0] === 'ROLE_KRING_VERWERKER'"
      :model-value="user.gemeentes ?? []"
      :options="gemeentes"
      placeholder="Selecteer gemeentes"
      @update:model-value="user.gemeentes = $event"
    />
  </template>
</UserManagement>

📤 How to publish

1. Bump the version in package.json.

2. Build the package:

   npm run build

3. Log in to npm once per machine (account must be a maintainer of user-management-vue):

   npm login

4. Publish:

   npm publish

🔌 API Expectations

Your backend API should follow REST principles and respond to the following:

• GET /users?page=0&size=10
  Returns paginated list and must include the X-Total-Count header

• POST /users or PUT /users
  Accepts user payload

• DELETE /users/:login
  Deletes a user

All requests include the header:

Authorization: Bearer <your token>