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

1. How to create

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

   <script setup lang="ts">
   import { Icon } from '@iconify/vue'
   
   defineProps({
     title: String,
     icon: String
   })
   </script>
   
   <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>
   
   <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>

2. 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) 
      },
    })

3. 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" />

4. 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

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

4/30/26, 8:28 AM

View All Changelog

• 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

Copyright Ownership:EmirioBomb

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

Contributors: EmirioBomb