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