Components

Valaxy has several simple components built in.

You can use them directly when writing articles or themes.

Basic Components ​

Layout and Rendering ​

• ValaxyMain.vue: Basic page layout
• ValaxyMd.vue: Rendered Markdown content

Others ​

• AppLink.vue: The link automatically determines whether it is an intra-site link. Use <router-link/> for intra-site links and <a target=" blank"></a>for external links.
• ValaxyCopyright.vue: The copyright information in the article.
• ValaxyDecrypt.vue: Text decryption component
• ValaxyGalleryDecrypt.vue: Picture decryption component
• ValaxyLogo.vue: Valaxy Logo with gradient color
• ValaxySvgLogo.vue: Valaxy SVG Logo
• ValaxyPagination.vue: Paging component
• ValaxyOverlay.vue: Grey mask component
• ValaxyHamburger.vue: Hamburger button

<ValaxyLogo />

Helper Components ​

内置组件 ​

For users, can be used directly.

You can also extend public components by valaxy-addon-components.

Internationalization Component <VT /> ​

menu:
  posts: 博客文章

menu:
  posts: Posts

<!-- auto follow locale -->
<VT content="menu.posts" />

扩展公共组件 ​

pnpm add valaxy-addon-components

如：

• CodePen: CodePen code snippets
• VCLiveTime: The establishment time of the site

My Blog Content

<CodePen class="h-300px" name="Margin Collapse" id="WqXGpo" user="YunYouJun" tab="html,result" />

My Blog Content

See the Pen Margin Collapse by YunYouJun (@YunYouJun) on CodePen.

Debug Component ​

<ValaxyDebug /> ​

Valaxy has a built-in <ValaxyDebug /> debug panel component that is only available in development mode (completely removed in production builds, zero overhead).

This component displays a collapsible floating panel in the bottom-left corner of the page, providing the following debug information:

• Breakpoints: Currently active responsive breakpoints (xs / sm / md / lg / xl / 2xl)
• Route: Current route information (path, name, layout, query, params)
• Frontmatter: Current page frontmatter data (JSON format)
• Config: Site configuration summary and theme configuration

Usage ​

Use it directly in your theme or layout (no import needed, it’s globally registered):

<template>
  <div>
    <!-- your page content -->
    <ValaxyDebug />
  </div>
</template>

Custom ​

For more usage, please refer to Custom Components.