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

frontend-pages

Add Vue 3 pages to OrangeHRM using the 4-step registration flow.

1.1k|746|Updated Jan 5, 2017
Search Tags:#frontend#vue3#import-aliases#orangehrm#page-registration#oxd-design-system#component-debugging
One-click install
npx skills add https://github.com/orangehrm/orangehrm --skill frontend-pages
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-pages
Source: https://github.com/orangehrm/orangehrm/tree/main/.agents/skills/frontend-pages
Command: npx skills add https://github.com/orangehrm/orangehrm --skill frontend-pages

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

OrangeHRM uses a unique per-page mini-SPA Vue 3 frontend architecture with no client-side router, which creates common development pain points like blank pages from component name mismatches, confusion around page registration flows, and uncertainty about which import aliases or OXD design system components to use. This Skill eliminates those friction points by providing clear, actionable guidance for all frontend page-related tasks.

Core Features & Use Cases

  • 4-Step Page Registration Flow: Step-by-step instructions for adding new Vue pages, from writing the component to linking it to the backend page controller.
  • OXD Design System & Custom Component Reference: Full catalog of used OXD components and OrangeHRM's custom @ohrm/components layer, including usage examples for forms, tables, and inputs.
  • Debugging Playbook: Targeted checklists to resolve common issues like non-rendering pages, stale builds, and Vue 3 reactivity gotchas.
  • Architecture Guidance: Clear explanations of the mini-SPA model, navigation patterns, state lifetime, and plugin frontend layout conventions.
  • Use Case Example: A developer adding a new employee list page can follow the registration steps, use the pre-documented OXD card-table component, and avoid the common blank page error by matching the backend component name exactly.

Quick Start

Use the frontend-pages skill to add a new Vue page for the employee onboarding feature by following the documented 4-step registration flow and using the correct OXD form and table components.

Frequently Asked Questions about frontend-pages

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

FAQPage Schema
How do I add a new Vue 3 page in OrangeHRM's frontend?▼

To add a new Vue 3 page in OrangeHRM, follow the documented 4-step page registration flow: write the component, register it, link it to the backend page controller, and ensure the component name matches the backend contract exactly to avoid blank pages.

Why is my OrangeHRM Vue page rendering blank?▼

A blank OrangeHRM Vue page is typically caused by a component name mismatch between the frontend and backend page controller. Use the debugging playbook to check component name contracts, resolve stale builds, and identify Vue 3 reactivity gotchas.

How does the OrangeHRM mini-SPA architecture work without a client-side router?▼

The OrangeHRm mini-SPA architecture operates on a per-page basis without a client-side router, meaning each page acts as an independent Vue 3 application. This model requires strict adherence to page anatomy, state lifetime rules, and plugin frontend layout conventions.

What is the correct way to use OXD design system components in Vue 3?▼

To use OXD design system components in Vue 3, reference the catalog of OXD components and the custom @ohrm/components layer for usage examples. This ensures correct implementation of forms, tables, and inputs while adhering to OrangeHRM's frontend coding conventions.

Which webpack import aliases should I use for OrangeHRM frontend development?▼

For OrangeHRM frontend development, select the correct webpack import aliases by following the architecture guidance to ensure modules resolve properly. This prevents build failures and maintains consistency across the per-page mini-SPA Vue 3 structure.

How do I apply permission-based ACL gating to a Vue page?▼

To apply permission-based ACL gating, ensure your Vue page satisfies the backend-frontend component name contracts and follows OrangeHRM's frontend coding conventions. This architecture requires matching access control lists exactly during the page registration flow.

Related Skills

Explore More Software Engineering Skills→
partme-aipartme-ai
610

webpack

Configure Webpack bundlers with loaders, plugins, and code splitting.

Official
Intermediate
ProxiBlueProxiBlue
15

create-backend-controller

Scaffolds Magento 2 backend admin controllers with ACL, routes, and UI integration.

Community
Advanced
TheBushidoCollectiveTheBushidoCollective
187

zustand-typescript

Create type-safe Zustand stores with explicit interfaces and typed selectors.

Official
Advanced
mambisimambisi

routing

Manage SPA routing with route guards, loaders, and client-side navigation in pocopine.

Community
Advanced