user-management-vue

🧑‍💼 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

---

🔌 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>