Custom Component-SectionTitle
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.vueand 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>How to register
Update
.vuepress/theme/client.tsas follows:.vuepress/theme/client.tsimport { 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 settype: customin theFrontmatter, 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
๐ 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
Copyright
Copyright Ownership:EmirioBomb
License under:Attribution 4.0 International (CC-BY-4.0)