skills.rest
orangehrm
orangehrmOFFICIAL
Explore all skills by this author →
WebsiteGitHub

frontend-data

Implement OrangeHRM Vue data flows with APIService, pagination, and validation.

1.1k|746|Updated Jan 5, 2017
Search Tags:#vue#api integration#data loading#form validation#validation rules#orangehrm#frontend composables
One-click install
npx skills add https://github.com/orangehrm/orangehrm --skill frontend-data
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-data
Source: https://github.com/orangehrm/orangehrm/tree/main/.agents/skills/frontend-data
Command: npx skills add https://github.com/orangehrm/orangehrm --skill frontend-data

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill eliminates the friction of working with OrangeHRM's Vue frontend data layer, removing the need to reverse-engineer API conventions, composable patterns, or validation rules from scattered source code. It provides a single reference for all frontend data operations, ensuring consistency with the platform's established backend and frontend contracts.

Core Features & Use Cases

  • APIService & Reactive Data Loading: Reference for the axios wrapper that mirrors backend /api/v2/... routes 1:1, including 401/422 interceptors and ETag-based production caching, plus composables like usePaginate (for filterable, sortable paginated lists) and useSort that automatically re-fetch data when query parameters change.
  • Form Handling & Validation: Covers form composables (useForm, useServerValidation for backend uniqueness checks), and a catalog of ~40 reusable client-side validation rules for common input types like dates, files, numbers, and formatted strings.
  • Use Case: Use this Skill when building a new Vue component that calls OrangeHRM APIs, debugging why a list does not re-fetch when filters change, wiring server-side 422 validation errors to form fields, or selecting the correct validation rule for a specific input type.

Quick Start

Use the frontend-data skill to build a paginated, filterable list of employee job titles with sortable columns and client-side validation for the job title name field.

Frequently Asked Questions about frontend-data

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I integrate Vue components with OrangeHRM APIs for data loading?▼

To integrate Vue components with OrangeHRM APIs, use the platform's axios APIService wrapper which mirrors /api/v2/ routes 1:1 and includes 401/422 interceptors. Reactive data loading is handled through composables like usePaginate and useSort that automatically re-fetch data when query parameters change.

How do I handle 422 server validation errors in Vue form submissions?▼

Handle 422 server validation errors in Vue form submissions by using the useServerValidation composable for backend uniqueness checks. This approach wires server-side 422 validation handshakes directly to form fields, ensuring error messages align with OrangeHRM's backend conventions.

What is the best way to build a paginated and sortable list view in OrangeHRM's Vue frontend?▼

The best way to build paginated and sortable list views is using the usePaginate and useSort composables. These composables manage filterable, sortable paginated lists and automatically re-fetch data when filter or sort query parameters change.

Why does my Vue list component not re-fetch data when filters change?▼

A Vue list component fails to re-fetch data when filters change if it bypasses the usePaginate or useSort composables. These composables are required to watch query parameters and automatically trigger reactive data fetching through the APIService wrapper.

Can I use custom client-side validation rules for OrangeHRM form inputs?▼

You can implement client-side validation for OrangeHRM form inputs using a catalog of approximately 40 reusable validation rules. These rules cover common input types including dates, files, numbers, and formatted strings, matching the platform's backend validation conventions.

Related Skills

Explore More Software Engineering Skills→
orangehrmorangehrm
1.1k

rest-validation

Implement input validation rules for OrangeHRM REST API v2 endpoints.

Official
Advanced
BintzGavinBintzGavin
94

example-vue

Integrate Helios into Vue components to manage reactive timelines and visuals.

Community
Intermediate
sauce-basesauce-base
66

inertia-vue-development

Develop Inertia.js v2 Vue client-side applications with pages, forms, and navigation.

Community
Intermediate
michsindlingermichsindlinger
1

vue

Provide Vue 3 and TypeScript patterns for components, Pinia, composables, and VeeValidate.

Community
Intermediate