Built-in Components
About 1 min
By using vuepress-plugin-components, you can import and use some components in your Markdown files.
Available components:
- ArtPlayer: A video player powered by ArtPlayer
- Badge: Colorful badge component
- BiliBili: Embedded BiliBili video
- CodePen: Embedded CodePen demo
- PDF: Embedded PDF viewer
- Share: Sharing current page with social medias
- StackBlitz: Embedded StackBlitz demo
- SiteInfo: Display sites
- VPBanner: A banner component
- VPCard: A card component
- VidStack: Audio/Video player powered by VidStack
- XiGua: Embedded XiGua video
To enable components, you should set plugins.components.components with an array of components names.
Note
By default, <Badge /> is available to align with @vuepress/theme-default.
import { hopeTheme } from "vuepress-theme-hope";
export default {
theme: hopeTheme({
plugins: {
components: {
// components you want
components: [
"ArtPlayer",
"Badge",
"BiliBili",
"CodePen",
"PDF",
"Share",
"SiteInfo",
"StackBlitz",
"VPBanner",
"VPCard",
"VidStack",
"XiGua",
],
},
},
}),
};Utilities
Badge
Badge types
- tip
- warning
- danger
- important
- info
- note
- <Badge text="tip" type="tip" vertical="middle" />
- <Badge text="warning" type="warning" vertical="middle" />
- <Badge text="danger" type="danger" vertical="middle" />
- <Badge text="important" type="important" vertical="middle" />
- <Badge text="info" type="info" vertical="middle" />
- <Badge text="note" type="note" vertical="middle" />See Badge page for available props.
SiteInfo
Basic site info
<SiteInfo name="Mr.Hope's Blog" url="https://mister-hope.com" preview="https://theme-hope.vuejs.press/assets/image/mrhope.jpg" />Site info with more properties
<SiteInfo
name="Mr.Hope's Blog"
desc="Where there is light, there is hope"
url="https://mister-hope.com"
logo="https://mister-hope.com/logo.svg"
repo="https://github.com/Mister-Hope/Mister-Hope.github.io"
preview="https://theme-hope.vuejs.press/assets/image/mrhope.jpg"
/>See SiteInfo page for available props.
Share
Basic share
<Share />Customize services
<Share services="qq,weibo" />
<Share :services="['qq','weibo']" />Colorful icon
<Share colorful />See Share page for available props.
Medias
VidStack
Install
vidstack@nextfirst.
A video player
<VidStack
src="https://files.vidstack.io/sprite-fight/720p.mp4"
poster="https://files.vidstack.io/sprite-fight/poster.webp"
/>A video player with poster, subtitles, chapters and thumbnails
<VidStack
title="Agent 327 Operation Barber Shop"
poster="https://files.vidstack.io/agent-327/poster.png"
:src="[
{
src: 'https://files.vidstack.io/agent-327/720p.mp4',
type: 'video/mp4',
},
{
src: 'https://files.vidstack.io/agent-327/720p.avi',
type: 'video/avi',
},
{
src: 'https://files.vidstack.io/agent-327/720p.ogv',
type: 'video/ogg',
},
]"
:tracks="[
{
src: 'https://files.vidstack.io/agent-327/subs/english.vtt',
label: 'English',
language: 'en-US',
kind: 'subtitles',
default: true,
},
{
src: 'https://files.vidstack.io/agent-327/subs/spanish.vtt',
label: 'Spanish',
language: 'es-ES',
kind: 'subtitles',
},
{
src: 'https://files.vidstack.io/agent-327/subs/french.vtt',
label: 'French',
language: 'fr-FR',
kind: 'subtitles',
},
{
src: 'https://files.vidstack.io/agent-327/subs/german.vtt',
label: 'German',
language: 'ge-GE',
kind: 'subtitles',
},
{
src: 'https://files.vidstack.io/agent-327/subs/italian.vtt',
label: 'Italian',
language: 'it-IT',
kind: 'subtitles',
},
{
src: 'https://files.vidstack.io/agent-327/subs/russian.vtt',
label: 'Russian',
language: 'ru-RU',
kind: 'subtitles',
},
// Chapters
{
src: 'https://files.vidstack.io/agent-327/chapters.vtt',
kind: 'chapters',
language: 'en-US',
default: true,
},
]"
thumbnails="https://files.vidstack.io/agent-327/thumbnails.vtt"
/>A streaming video player
<VidStack
src="https://files.vidstack.io/sprite-fight/hls/stream.m3u8"
:tracks="[
{
src: 'https://files.vidstack.io/agent-327/subs/english.vtt',
label: 'English',
language: 'en-US',
kind: 'subtitles',
default: true,
},
{
src: 'https://files.vidstack.io/agent-327/subs/spanish.vtt',
label: 'Spanish',
language: 'es-ES',
kind: 'subtitles',
},
{
src: 'https://files.vidstack.io/agent-327/subs/french.vtt',
label: 'French',
language: 'fr-FR',
kind: 'subtitles',
},
{
src: 'https://files.vidstack.io/agent-327/subs/german.vtt',
label: 'German',
language: 'ge-GE',
kind: 'subtitles',
},
{
src: 'https://files.vidstack.io/agent-327/subs/italian.vtt',
label: 'Italian',
language: 'it-IT',
kind: 'subtitles',
},
{
src: 'https://files.vidstack.io/agent-327/subs/russian.vtt',
label: 'Russian',
language: 'ru-RU',
kind: 'subtitles',
},
// Chapters
{
src: 'https://files.vidstack.io/agent-327/chapters.vtt',
kind: 'chapters',
language: 'en-US',
default: true,
},
]"
thumbnails="https://files.vidstack.io/agent-327/thumbnails.vtt"
/>An audio player
<VidStack
src="//theme-hope-assets.vuejs.press/files/sample.mp3"
title="VidStack Audio Demo"
/>YouTube player
<VidStack
src="youtube/_cMxraX_5RE"
title="VidStack YouTube Demo"
/>See VidStack page for available props.
PDF viewer component.
Default PDF viewer
<PDF url="//theme-hope-assets.vuejs.press/files/sample.pdf" />PDF viewer starting with page 2 and without toolbar
<PDF url="//theme-hope-assets.vuejs.press/files/sample.pdf" page="2" no-toolbar />See PDF page for available props.
BiliBili
Embed BiliBili videos in Markdown files.
A bilibili video with custom settings
<BiliBili aid="34304064" cid="109293122" ratio="9:16" time="60" page="2" />See BiliBili page for available props.
ArtPlayer
Install
artplayerfirst.
A video player
<ArtPlayer src="https://vp-demo.u2sb.com/video/caminandes_03_llamigos_720p.mp4" />A video player with poster
<ArtPlayer
src="https://vp-demo.u2sb.com/video/caminandes_03_llamigos_720p.mp4"
poster="/poster.svg"
/>A video player with custom settings:
<ArtPlayer
src="https://vp-demo.u2sb.com/video/caminandes_03_llamigos_720p.mp4"
airplay
aspect-ratio
auto-size
auto-orientation
auto-playback
fast-forward
flip
fullscreen-web
lock
loop
is-live
muted
mini-progress-bar
pip
screenshot
subtitle-offset
/>See ArtPlayer page for available props.
Code
CodePen
A component which allows you to embed CodePen demo.
A demo with user and slug hash
See Solar System animation - Pure CSS by kowlor on CodePen.
<CodePen
user="kowlor"
slug-hash="ZYYQoy"
title="Solar System animation - Pure CSS"
:default-tab="['css','result']"
:theme="$isDarkMode? 'dark': 'light'"
/>A demo with link
See Solar System animation - Pure CSS by kowlor on CodePen.
<CodePen
link="https://codepen.io/kowlor/pen/ZYYQoy"
title="Solar System animation - Pure CSS"
:default-tab="['css','result']"
:theme="$isDarkMode? 'dark': 'light'"
/>A click to run demo
See Envelope w/ Hearts by kowlor on CodePen.
<CodePen
link="https://codepen.io/kowlor/pen/ZYYQoy"
title="Envelope w/ Hearts"
status="clicktorun"
:default-tab="['css','result']"
:theme="$isDarkMode? 'dark': 'light'"
/>See CodePen page for available props.
StackBlitz
Embed StackBlitz demo in Markdown files.
A StackBlitz project
<StackBlitz id="vuepress-theme-hope" />A StackBlitz project with custom settings
<StackBlitz id="vuepress-theme-hope" hideExplorer hideNavigation hideDevtools />See StackBlitz page for available props.
Changelog
3/6/25, 5:00 AM
View All Changelog
ac7cf-onb1230-on66d77-ondd4a8-on99f51-on16ba7-on4c6db-on75da4-on96c95-onfeeb4-on1f390-on9bd48-on81516-onb41c0-on2f66e-on35e62-on54c46-on497db-on5c0cb-ond77b1-on9b413-on1da28-on3f311-on3c27a-onfb6da-on4fe0d-on0739c-on72438-on0f844-on757fd-on43072-onbcfb6-one728e-on02c41-ond09ab-on5a136-onaa14c-on34452-ond3b16-ond82a8-on794f9-on7e98c-onc887b-on6136a-on8f6b0-on2a306-one9ea0-on14010-one08cc-on9b72f-onb8b8e-on760c6-on737eb-on8902d-on8174c-on9100f-onf5b66-on2e770-oncd6cc-on3cdac-on5412c-on93657-onc8d60-onb65b9-on90058-ond69e5-onf84df-onaafb1-onae2d2-onab41c-onb3c50-on69cce-on6b8c4-onc0c7e-on563e2-on58b12-one835b-on1e7ba-on09c9b-onb8835-onc7061-on88255-on145a8-on2243a-on84771-on0b6f3-one2bb6-on49d58-on3dac6-on5d62e-on2fa50-on22c53-on3c8d6-on57c57-onf732e-on55cc9-on9856d-onaab9e-onc540c-one0f17-on6c51a-on48bca-on008a9-ond031d-on07909-on306d2-onf635d-on88e69-ondb823-on1eb77-oned3ab-on2d1be-onf6ff0-on3c199-on
