Custom Component-SectionTitle

About 325 wordsAbout 1 min

Component icon

2026-04-22

My First Custom Component: Building a SectionTitle with Icon Support

💡 Motivation

Why I built this?

Get familiar with how components work
Keep section titles visually consistent

🎯 Goals

Consistent section titles with one component

✅ Accept dynamic title via props
✅ Support icons (Iconify)

✍️ Implementation

How to create

Create .vuepress/theme/components/SectionTitle.vue and define the component as follows:

<template>
  <div class="section-title" :class="{ empty: !icon && !title }">
    <template v-if="icon || title">
      <Icon v-if="icon" :icon="icon" />
      <span v-if="title">{{ title }}</span>
    </template>

    <div v-else class="divider-line"></div>
  </div>
</template>

<script setup lang="ts">
import { Icon } from '@iconify/vue'

defineProps({
  title: String,
  icon: String
})
</script>

<style scoped>
.section-title {
  --gradient: linear-gradient(
    270deg,
    var(--vp-c-purple-1),
    var(--vp-c-brand-2),
    var(--vp-c-purple-1)
  );

  --anim: gradient-flow 2s linear infinite;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
}

.section-title:not(.empty) {
  background: var(--gradient);
  background-size: 200% 100%;
  animation: var(--anim);

  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.section-title:not(.empty)::before,
.section-title:not(.empty)::after {
  content: "";
  flex: 1;
  height: 2px;

  background: var(--gradient);
  background-size: 200% 100%;
  animation: var(--anim);

  border-radius: 2px;
}

.divider-line {
  width: 100%;
  height: 2px;

  background: var(--gradient);
  background-size: 200% 100%;
  animation: var(--anim);

  border-radius: 2px;
}

@keyframes gradient-flow {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}
</style>

How to register

Update .vuepress/theme/client.ts as follows:

.vuepress/theme/client.ts
 import { defineClientConfig } from 'vuepress/client'
 import SectionTitle from './theme/components/SectionTitle.vue'

 export default defineClientConfig({
   enhance({ app }) {
       app.component('SectionTitle', SectionTitle) 
   },
 })

How to use
You can use this component anywhere, such as in posts or blogs.
docs/README.md
```
<SectionTitle title="Repository" icon="codicon:repo" />
```
Warning
When using this component on the homepage, remember to set type: custom in the Frontmatter, otherwise it won’t render properly.
docs/README.md
```
---
home: true
pageLayout: home
externalLinkIcon: false
config:
  - type: custom
---

<SectionTitle title="Repository" icon="codicon:repo" />
```
Final Result
Repository

📖 Props

titleOptionalstring

Section title

iconOptionalstring

Iconify icon name, like mdi:home or codicon:repo

🚀 Usage

title	icon	status	sample
✔	✔	icon + title	`<SectionTitle title="Repository" icon="codicon:repo" />`
✔	✖	title only	`<SectionTitle title="Repository" />`
✖	✔	icon only	`<SectionTitle icon="codicon:repo" />`
✖	✖	divider	`<SectionTitle />`

✨ Preview

Repository

🔖 Summary

Info

It’s a small and basic component, but while working on it, I noticed something:

🧩 Front-end isn’t just about how things look — it’s also about how everything fits together.

And honestly, that’s the part I enjoy the most.

Changelog

5/15/26, 7:41 AM

View All Changelog

eb93b-docs(section-title): 💬 update tagson 5/15/26
7a98b-docs(section-title): 📝 update table styles and fix some texton 5/15/26
84703-docs(section-title): 📝 update permalink to file path formaton 4/30/26
ec1bd-docs(section-title): 📝 refine docs layout and update descriptionson 4/28/26
1a0bb-docs(blog): ✨ add SectionTitle component blogon 4/22/26

Copyright

License under:Attribution 4.0 International (CC-BY-4.0)