feat: Add Markdown Page route and component

auto-imports.d.ts

@@ -15,11 +15,13 @@ declare global {
   const defineComponent: typeof import('vue')['defineComponent']
   const defineStore: typeof import('pinia')['defineStore']
   const effectScope: typeof import('vue')['effectScope']
+  const getActiveHead: typeof import('@unhead/vue')['getActiveHead']
   const getActivePinia: typeof import('pinia')['getActivePinia']
   const getCurrentInstance: typeof import('vue')['getCurrentInstance']
   const getCurrentScope: typeof import('vue')['getCurrentScope']
   const h: typeof import('vue')['h']
   const inject: typeof import('vue')['inject']
+  const injectHead: typeof import('@unhead/vue')['injectHead']
   const isProxy: typeof import('vue')['isProxy']
   const isReactive: typeof import('vue')['isReactive']
   const isReadonly: typeof import('vue')['isReadonly']
@@ -66,9 +68,15 @@ declare global {
   const useAttrs: typeof import('vue')['useAttrs']
   const useCssModule: typeof import('vue')['useCssModule']
   const useCssVars: typeof import('vue')['useCssVars']
+  const useHead: typeof import('@unhead/vue')['useHead']
+  const useHeadSafe: typeof import('@unhead/vue')['useHeadSafe']
   const useLink: typeof import('vue-router')['useLink']
   const useRoute: typeof import('vue-router')['useRoute']
   const useRouter: typeof import('vue-router')['useRouter']
+  const useSeoMeta: typeof import('@unhead/vue')['useSeoMeta']
+  const useServerHead: typeof import('@unhead/vue')['useServerHead']
+  const useServerHeadSafe: typeof import('@unhead/vue')['useServerHeadSafe']
+  const useServerSeoMeta: typeof import('@unhead/vue')['useServerSeoMeta']
   const useSlots: typeof import('vue')['useSlots']
   const watch: typeof import('vue')['watch']
   const watchEffect: typeof import('vue')['watchEffect']

package.json

@@ -16,6 +16,7 @@
   },
   "dependencies": {
     "@alova/adapter-axios": "^2.0.5",
+    "@unhead/vue": "^1.10.0",
     "@vant/use": "^1.6.0",
     "@yanhao98/vue-router-helper": "^0.0.4",
     "alova": "^3.0.6",

pnpm-lock.yaml

@@ -16,6 +16,9 @@ importers:
       '@alova/adapter-axios':
         specifier: ^2.0.5
         version: 2.0.5(alova@3.0.7)(axios@1.7.3)
+      '@unhead/vue':
+        specifier: ^1.10.0
+        version: 1.10.0(vue@3.4.37(typescript@5.5.4))
       '@vant/use':
         specifier: ^1.6.0
         version: 1.6.0(vue@3.4.37(typescript@5.5.4))
@@ -933,6 +936,20 @@ packages:
   '@ungap/structured-clone@1.2.0':
     resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
 
+  '@unhead/dom@1.10.0':
+    resolution: {integrity: sha512-LdgtOlyMHOyuQNsUKM+1d8ViiiY4LxjCPJlgUU/5CwgqeRYf4LWFu8oRMQfSQVTusbPwwvr3MolM9iTUu2I4BQ==, tarball: https://registry.npmjs.org/@unhead/dom/-/dom-1.10.0.tgz}
+
+  '@unhead/schema@1.10.0':
+    resolution: {integrity: sha512-hmgkFdLzm/VPLAXBF89Iry4Wz/6FpHMfMKCnAdihAt1Ublsi04RrA0hQuAiuGG2CZiKL4VCxtmV++UXj/kyakA==, tarball: https://registry.npmjs.org/@unhead/schema/-/schema-1.10.0.tgz}
+
+  '@unhead/shared@1.10.0':
+    resolution: {integrity: sha512-Lv7pP0AoWJy+YaiWd4kGD+TK78ahPUwnIRx6YCC6FjPmE0KCqooeDS4HbInYaklLlEMQZislXyIwLczK2DTWiw==, tarball: https://registry.npmjs.org/@unhead/shared/-/shared-1.10.0.tgz}
+
+  '@unhead/vue@1.10.0':
+    resolution: {integrity: sha512-Cv9BViaOwCBdXy3bsTvJ10Rs808FSSq/ZfeBXzOjOxt08sbubf6Mr5opBdOlv/i1bzyFVIAqe5ABmrhC9mB80w==, tarball: https://registry.npmjs.org/@unhead/vue/-/vue-1.10.0.tgz}
+    peerDependencies:
+      vue: '>=2.7 || >=3'
+
   '@unocss/astro@0.62.1':
     resolution: {integrity: sha512-vUcNHfiqVNd1U1OuiZPtc2T/I7S8nrmXkWwLjz3KzVj8Q0CGUN70eQaz0F01EOg+P62Wxegm/trjGD7/ze5Ldw==}
     peerDependencies:
@@ -2737,6 +2754,9 @@ packages:
   undici-types@6.13.0:
     resolution: {integrity: sha512-xtFJHudx8S2DSoujjMd1WeWvn7KKWFRESZTMeL1RptAYERu29D6jphMjjY+vn96jvN3kVPDNxU/E13VTaXj6jg==}
 
+  unhead@1.10.0:
+    resolution: {integrity: sha512-nv75Hvhu0asuD/rbP6b3tSRJUltxmThq/iZU5rLCGEkCqTkFk7ruQGNk+TRtx/RCYqL0R/IzIY9aqvhNOGe3mg==, tarball: https://registry.npmjs.org/unhead/-/unhead-1.10.0.tgz}
+
   unimport@3.10.0:
     resolution: {integrity: sha512-/UvKRfWx3mNDWwWQhR62HsoM3wxHwYdTq8ellZzMOHnnw4Dp8tovgthyW7DjTrbjDL+i4idOp06voz2VKlvrLw==}
 
@@ -3065,6 +3085,9 @@ packages:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}
 
+  zhead@2.2.4:
+    resolution: {integrity: sha512-8F0OI5dpWIA5IGG5NHUg9staDwz/ZPxZtvGVf01j7vHqSyZ0raHY+78atOVxRqb73AotX22uV1pXt3gYSstGag==, tarball: https://registry.npmjs.org/zhead/-/zhead-2.2.4.tgz}
+
 snapshots:
 
   '@alova/adapter-axios@2.0.5(alova@3.0.7)(axios@1.7.3)':
@@ -3739,6 +3762,28 @@ snapshots:
 
   '@ungap/structured-clone@1.2.0': {}
 
+  '@unhead/dom@1.10.0':
+    dependencies:
+      '@unhead/schema': 1.10.0
+      '@unhead/shared': 1.10.0
+
+  '@unhead/schema@1.10.0':
+    dependencies:
+      hookable: 5.5.3
+      zhead: 2.2.4
+
+  '@unhead/shared@1.10.0':
+    dependencies:
+      '@unhead/schema': 1.10.0
+
+  '@unhead/vue@1.10.0(vue@3.4.37(typescript@5.5.4))':
+    dependencies:
+      '@unhead/schema': 1.10.0
+      '@unhead/shared': 1.10.0
+      hookable: 5.5.3
+      unhead: 1.10.0
+      vue: 3.4.37(typescript@5.5.4)
+
   '@unocss/astro@0.62.1(rollup@4.20.0)(vite@5.4.0(@types/node@22.2.0)(less@4.2.0))':
     dependencies:
       '@unocss/core': 0.62.1
@@ -5695,6 +5740,13 @@ snapshots:
 
   undici-types@6.13.0: {}
 
+  unhead@1.10.0:
+    dependencies:
+      '@unhead/dom': 1.10.0
+      '@unhead/schema': 1.10.0
+      '@unhead/shared': 1.10.0
+      hookable: 5.5.3
+
   unimport@3.10.0(rollup@4.20.0):
     dependencies:
       '@rollup/pluginutils': 5.1.0(rollup@4.20.0)
@@ -6093,3 +6145,5 @@ snapshots:
   yaml@2.5.0: {}
 
   yocto-queue@0.1.0: {}
+
+  zhead@2.2.4: {}

src/main.ts

@@ -3,12 +3,14 @@ import 'virtual:uno.css';
 
 import { createApp } from 'vue';
 import { createPinia } from 'pinia';
+import { createHead, unheadVueComposablesImports } from '@unhead/vue';
 
 import App from './App.vue';
 import { router } from './router';
 import { DataLoaderPlugin } from 'unplugin-vue-router/data-loaders';
 
 createApp(App)
+  .use(createHead())
   .use(createPinia())
   // Register the plugin before the router
   .use(DataLoaderPlugin, { router })

src/pages/index-page.vue

@@ -1,4 +1,15 @@
 <script lang="ts" setup>
+useHead({
+  // Titles
+  title: 'Hello World',
+  titleTemplate: '%s %separator %siteName',
+  // Template params
+  templateParams: { separator: '|', siteName: 'My App' },
+  // Classes
+  bodyAttrs: { class: { overflow: true } },
+  // Deduping
+  // script: [{ key: '123', src: '/script.js' }],
+});
 definePage({
   alias: '/',
 });
@@ -11,5 +22,6 @@ definePage({
     <li><router-link :to="{ name: 'TsEnumUtil' }">TS Enum Util</router-link></li>
     <li><router-link :to="{ name: 'SomePage' }">Some Page</router-link></li>
     <li><router-link :to="{ name: '中文页面' }">中文-页面.page.vue</router-link></li>
+    <li><router-link :to="{ name: 'MdPage' }">Markdown Page</router-link></li>
   </ul>
 </template>

src/pages/md-page.md

@@ -0,0 +1,11 @@
+---
+name: My Cool App
+title: My Cool App
+meta:
+  - name: description
+    content: Hello World
+---
+
+# Hello World
+
+This is {{frontmatter.name}}

typed-router.d.ts

@@ -21,6 +21,7 @@ declare module 'vue-router/auto-routes' {
     '中文页面': RouteRecordInfo<'中文页面', '/中文-页面', Record<never, never>, Record<never, never>>,
     'DataLoadersId': RouteRecordInfo<'DataLoadersId', '/data-loaders/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
     'IndexPage': RouteRecordInfo<'IndexPage', '/index-page', Record<never, never>, Record<never, never>>,
+    'MdPage': RouteRecordInfo<'MdPage', '/md-page', Record<never, never>, Record<never, never>>,
     'SomePage': RouteRecordInfo<'SomePage', '/some-page', Record<never, never>, Record<never, never>>,
     'TsEnumUtil': RouteRecordInfo<'TsEnumUtil', '/ts-enum-util', Record<never, never>, Record<never, never>>,
   }

vite.config.ts

@@ -1,5 +1,5 @@
 import { VantResolver } from '@vant/auto-import-resolver';
-import vue from '@vitejs/plugin-vue';
+import Vue from '@vitejs/plugin-vue';
 import vueJsx from '@vitejs/plugin-vue-jsx';
 import { fileURLToPath, URL } from 'node:url';
 import UnoCSS from 'unocss/vite';
@@ -12,6 +12,7 @@ import VueRouter from 'unplugin-vue-router/vite';
 import { defineConfig, loadEnv } from 'vite';
 import cdnImport from 'vite-plugin-cdn-import';
 import vueDevTools from 'vite-plugin-vue-devtools';
+import { unheadVueComposablesImports } from '@unhead/vue';
 
 // https://vitejs.dev/config/
 export default defineConfig(({ mode, command }) => {
@@ -39,9 +40,13 @@ export default defineConfig(({ mode, command }) => {
             importStyle: true,
           }),
         ],
-        imports: ['pinia', 'vue', VueRouterAutoImports],
+        imports: ['pinia', 'vue', VueRouterAutoImports, unheadVueComposablesImports],
       }),
       Components({
+        // allow auto load markdown components under `./src/components/`
+        extensions: ['vue', 'md'],
+        // allow auto import and register components used in markdown
+        include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
         resolvers: [
           TDesignResolver({
             library: 'mobile-vue',
@@ -53,9 +58,13 @@ export default defineConfig(({ mode, command }) => {
         ],
       }),
       UnoCSS(),
-      vue(),
+      Vue({
+        include: [/\.vue$/, /\.md$/], // <-- allows Vue to compile Markdown files
+      }),
       vueJsx(),
-      Markdown({}),
+      Markdown({
+        headEnabled: true,
+      }),
       vueDevTools(),
       cdnImport({
         // https://github.com/mmf-fe/vite-plugin-cdn-import/blob/HEAD/README.zh-CN.md