skills.rest
jiaiyan
jiaiyanCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

el-page-header

Create a reusable PageHeader component with back navigation and slots for Vue 3 Element Plus apps.

21|2|Updated Mar 13, 2026
Search Tags:#vue#breadcrumb#element-plus#ui-component#back-navigation#page-header#el-page-header
One-click install
npx skills add https://github.com/jiaiyan/element-plus-skills --skill el-page-header
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: el-page-header
Source: https://github.com/jiaiyan/element-plus-skills/tree/main/components/el-page-header
Command: npx skills add https://github.com/jiaiyan/element-plus-skills --skill el-page-header

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Page headers are often inconsistent across views. This Skill provides a ready-to-use PageHeader component to unify back navigation, breadcrumbs, and title areas in Element Plus-based pages.

Core Features & Use Cases

  • PageHeader component to render header with back navigation and content slots
  • Breadcrumb integration for navigational context
  • Slots: icon, title, content, breadcrumb, extra, and default for flexible header composition
  • Back event to handle navigation programmatically in Vue applications

Quick Start

Instantiate el-page-header with a back handler and a title in the content slot to display a header for a page.

Frequently Asked Questions about el-page-header

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

FAQPage Schema
How do I create a page header with back navigation and breadcrumbs in Vue 3?▼

To create a page header with back navigation and breadcrumbs in Vue 3, you can use a reusable UI component that renders a title area, breadcrumb trails, and a back event within Element Plus applications.

Does Element Plus support flexible page header content customization through slots?▼

Element Plus page header components can support flexible content customization by exposing named slots such as icon, title, content, breadcrumb, extra, and default for contextual header composition.

What is the best way to unify inconsistent page headers across Vue views?▼

The best way to unify inconsistent page headers across Vue views is to implement a ready-to-use PageHeader component that standardizes back navigation, breadcrumbs, and title areas across Element Plus pages.

Can I handle back navigation programmatically using a page header component in Element Plus?▼

You can handle back navigation programmatically in Element Plus by utilizing a page header component that exposes a dedicated back event for navigation control within your Vue application.

How do I add contextual header content to an Element Plus breadcrumb page header?▼

To add contextual header content to an Element Plus breadcrumb page header, populate the provided content and extra slots to compose flexible header layouts alongside the breadcrumb trail.

Related Skills

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

element-plus-vue3

Guide Element Plus Vue 3 component installation, theming, and API usage.

Official
Intermediate
partme-aipartme-ai
610

vue-router-v4

Configure Vue Router v4 routes, navigation guards, and dynamic matching for Vue 3.

Official
Intermediate
wepn13232wepn13232
7

element-plus-breadcrumb

Document Element Plus Breadcrumb attributes, slots, and router integration for Vue projects.

Community
Basic
wepn13232wepn13232
7

element-plus-table

Document Element Plus el-table attributes, events, slots, and tooltip behaviors.

Community
Intermediate