docs: how to use vue in markdown

docs/components/CustomVueDemo.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const num = ref(100)
+</script>
+
+<template>
+  <div class="text-bold text-red">
+    {{ num }}
+  </div>
+</template>

docs/pages/guide/markdown.md

@@ -17,6 +17,23 @@ end: false
 当然，你仍然可以在 Valaxy 中通过添加 MarkdownIt 插件来实现更多功能。
 :::
 
+## 在 Markdown 中使用 Vue
+
+可以直接在 Markdown 文件中导入和使用 Vue 组件。
+
+例如在 `components` 目录下创建一个 Vue 组件 `CustomVueDemo.vue`：
+
+<<< @/components/CustomVueDemo.vue
+
+```md
+---
+title: 在 Markdown 中使用 Vue
+---
+
+<!-- 在 markdown 中直接使用即可： -->
+<CustomVueDemo />
+```
+
 ## Emoji :tada: {lang="en"}
 
 ## Emoji 表情支持 :tada: {lang="zh-CN"}

packages/valaxy-theme-press/components/PressDocFooterLastUpdated.vue

@@ -3,6 +3,7 @@ import { useData } from 'valaxy'
 import { computed, onMounted, ref, watchEffect } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+const { t } = useI18n()
 const data = useData()
 
 const date = computed(() => new Date(data.lastUpdated!))
@@ -17,7 +18,6 @@ onMounted(() => {
     datetime.value = date.value.toLocaleString(window.navigator.language)
   })
 })
-const { t } = useI18n()
 </script>
 
 <template>

packages/valaxy-theme-press/composables/edit-link.ts

@@ -4,6 +4,7 @@ import { useThemeConfig } from '.'
 
 export function useEditLink() {
   const themeConfig = useThemeConfig()
+
   return computed(() => {
     const { text, pattern } = themeConfig.value.editLink || {}
     const { relativePath } = useData()

pnpm-lock.yaml

@@ -19,8 +19,8 @@ catalogs:
       specifier: ^1.2.5
       version: 1.2.5
     '@iconify-json/simple-icons':
-      specifier: ^1.2.26
-      version: 1.2.26
+      specifier: ^1.2.27
+      version: 1.2.27
     '@iconify-json/vscode-icons':
       specifier: ^1.2.16
       version: 1.2.16
@@ -207,7 +207,7 @@ importers:
         version: 1.2.5
       '@iconify-json/simple-icons':
         specifier: 'catalog:'
-        version: 1.2.26
+        version: 1.2.27
 
   demo/yun:
     dependencies:
@@ -272,7 +272,7 @@ importers:
         version: 1.2.8
       '@iconify-json/simple-icons':
         specifier: 'catalog:'
-        version: 1.2.26
+        version: 1.2.27
       nodemon:
         specifier: ^3.1.9
         version: 3.1.9
@@ -767,7 +767,7 @@ importers:
         version: 1.2.5
       '@iconify-json/simple-icons':
         specifier: 'catalog:'
-        version: 1.2.26
+        version: 1.2.27
       '@vueuse/motion':
         specifier: ^2.2.6
         version: 2.2.6(vue@3.5.13(typescript@5.8.2))
@@ -1788,6 +1788,9 @@ packages:
   '@iconify-json/simple-icons@1.2.26':
     resolution: {integrity: sha512-NvqRuE+5h/tp4boPlnvfs0alD0CvnRE7oeG9Li5NGmZRx2/rhwlNjW/vEVTyhZcR9zqvRPAVh2GXR+PTEpzV+A==}
 
+  '@iconify-json/simple-icons@1.2.27':
+    resolution: {integrity: sha512-FtZwp/H7ih5rY9FPfDR+k6toOo/cuwpHWY8faNhxLs5O5uW6Q8TeqdNWfjVfgFtrs5tUUzWysjqNGL234v8EMA==}
+
   '@iconify-json/vscode-icons@1.2.16':
     resolution: {integrity: sha512-hstc2yVq2UJ6v6FrgjftzXRvphGZBsKxvSeXoFLP1Hgx89TPZKrGE5SV6vqsoeIlLYaQ7OZbXmAoVGroTfGmVQ==}
 
@@ -8866,6 +8869,10 @@ snapshots:
     dependencies:
       '@iconify/types': 2.0.0
 
+  '@iconify-json/simple-icons@1.2.27':
+    dependencies:
+      '@iconify/types': 2.0.0
+
   '@iconify-json/vscode-icons@1.2.16':
     dependencies:
       '@iconify/types': 2.0.0

pnpm-workspace.yaml

@@ -11,7 +11,7 @@ catalog:
   '@iconify-json/carbon': ^1.2.8
   '@iconify-json/logos': ^1.2.4
   '@iconify-json/ri': ^1.2.5
-  '@iconify-json/simple-icons': ^1.2.26
+  '@iconify-json/simple-icons': ^1.2.27
   '@iconify-json/vscode-icons': ^1.2.16
   typescript: ^5.8.2
   unbuild: ^3.5.0