From c5c68a37c5576ee49dbf676b86a2add0d79d33f8 Mon Sep 17 00:00:00 2001
From: Runyasak Chaengnaimuang <runyasak.c@gmail.com>
Date: Sat, 7 Dec 2024 16:08:46 +0700
Subject: [PATCH 1/7] feat: implement defineProps

---
 src/core/markdown.ts                      | 20 +++++++++++++++++++-
 test/__snapshots__/excerpt.test.ts.snap   |  4 ++--
 test/__snapshots__/transform.test.ts.snap | 20 ++++++++++----------
 3 files changed, 31 insertions(+), 13 deletions(-)

diff --git a/src/core/markdown.ts b/src/core/markdown.ts
index 141b62a..17dc520 100644
--- a/src/core/markdown.ts
+++ b/src/core/markdown.ts
@@ -61,6 +61,24 @@ function extractCustomBlock(html: string, options: ResolvedOptions) {
   return { html, blocks }
 }
 
+function createDefinePropsWithDefaults(props: {
+  [s: string]: unknown
+}) {
+  const propsValue = Object
+    .entries(props)
+    .reduce((acc, [key, cur]) => `${acc}${key}:{default:${getPropsDefaultValue(cur)}},`, ``)
+
+  return `defineProps({${propsValue}})`
+}
+
+function getPropsDefaultValue<T = unknown>(value: T) {
+  return typeof value === 'string'
+    ? `\`${value}\``
+    : typeof value === 'object'
+      ? JSON.stringify(value)
+      : value
+}
+
 export function createMarkdown(options: ResolvedOptions) {
   const isVue2 = options.vueVersion.startsWith('2.')
 
@@ -171,7 +189,7 @@ export function createMarkdown(options: ResolvedOptions) {
       if (options.excerpt && !excerptKeyOverlapping && frontmatter.excerpt !== undefined)
         delete frontmatter.excerpt
 
-      scriptLines.push(`const frontmatter = ${JSON.stringify(frontmatter)}`)
+      scriptLines.push(`const frontmatter = ${createDefinePropsWithDefaults(frontmatter)}`)
 
       if (options.exportFrontmatter) {
         frontmatterExportsLines = Object.entries(frontmatter)
diff --git a/test/__snapshots__/excerpt.test.ts.snap b/test/__snapshots__/excerpt.test.ts.snap
index fcbd749..cc38038 100644
--- a/test/__snapshots__/excerpt.test.ts.snap
+++ b/test/__snapshots__/excerpt.test.ts.snap
@@ -11,7 +11,7 @@ exports[`excerpt > raw excerpt 1`] = `
 </ul>
 </div></template>
 <script setup>
-const frontmatter = {"title":"Hey"}
+const frontmatter = defineProps({title:{default:\`Hey\`},})
 defineExpose({ frontmatter })
 const excerpt = "\\nThis is an excerpt which is kept as **raw Markdown**.\\n\\n"
 </script>
@@ -32,7 +32,7 @@ exports[`excerpt > rendered excerpt 1`] = `
 </ul>
 </div></template>
 <script setup>
-const frontmatter = {"title":"Hey"}
+const frontmatter = defineProps({title:{default:\`Hey\`},})
 defineExpose({ frontmatter })
 const excerpt = "<p>This is an excerpt which has been rendered to <strong>HTML</strong>.</p>\\n"
 </script>
diff --git a/test/__snapshots__/transform.test.ts.snap b/test/__snapshots__/transform.test.ts.snap
index ff1a828..3b09a34 100644
--- a/test/__snapshots__/transform.test.ts.snap
+++ b/test/__snapshots__/transform.test.ts.snap
@@ -9,7 +9,7 @@ exports[`transform > basic 1`] = `
 </ul>
 </div></template>
 <script setup>
-const frontmatter = {"title":"Hey"}
+const frontmatter = defineProps({title:{default:\`Hey\`},})
 defineExpose({ frontmatter })
 </script>
 <script>
@@ -23,7 +23,7 @@ exports[`transform > code escape 1`] = `
 </code></pre>
 </div></template>
 <script setup>
-const frontmatter = {}
+const frontmatter = defineProps({})
 defineExpose({ frontmatter })
 </script>"
 `;
@@ -32,7 +32,7 @@ exports[`transform > couldn't expose frontmatter 1`] = `
 "<template><div class="markdown-body">
 </div></template>
 <script setup>
-const frontmatter = {"title":"Hey"}
+const frontmatter = defineProps({title:{default:\`Hey\`},})
 defineExpose({ test: 'test'})
 </script>
 <script>
@@ -46,7 +46,7 @@ exports[`transform > escapeCodeTagInterpolation 1`] = `
 </code></pre>
 </div></template>
 <script setup>
-const frontmatter = {}
+const frontmatter = defineProps({})
 defineExpose({ frontmatter })
 </script>"
 `;
@@ -55,7 +55,7 @@ exports[`transform > export keyword frontmatters 1`] = `
 "<template><div class="markdown-body"><p>Hello</p>
 </div></template>
 <script setup>
-const frontmatter = {"class":"text","default":"foo"}
+const frontmatter = defineProps({class:{default:\`text\`},default:{default:\`foo\`},})
 defineExpose({ frontmatter })
 </script>
 <script>
@@ -68,7 +68,7 @@ exports[`transform > exposes frontmatter 1`] = `
 "<template><div class="markdown-body"><h1>Hello</h1>
 </div></template>
 <script setup>
-const frontmatter = {"title":"Hey"}
+const frontmatter = defineProps({title:{default:\`Hey\`},})
 defineExpose({ frontmatter })
 </script>
 <script>
@@ -81,7 +81,7 @@ exports[`transform > frontmatter interpolation 1`] = `
 <p>This is {{frontmatter.name}}</p>
 </div></template>
 <script setup>
-const frontmatter = {"name":"My Cool App"}
+const frontmatter = defineProps({name:{default:\`My Cool App\`},})
 defineExpose({ frontmatter })
 </script>
 <script>
@@ -94,7 +94,7 @@ exports[`transform > script setup 1`] = `
 
 </div></template>
 <script setup lang="ts">
-const frontmatter = {}
+const frontmatter = defineProps({})
 defineExpose({ frontmatter })
 import Foo from './Foo.vue'
 </script>"
@@ -105,7 +105,7 @@ exports[`transform > style 1`] = `
 
 </div></template>
 <script setup>
-const frontmatter = {}
+const frontmatter = defineProps({})
 defineExpose({ frontmatter })
 </script>
 <style>h1 { color: red }</style>"
@@ -116,7 +116,7 @@ exports[`transform > vue directives 1`] = `
 <p><button @click="onClick"></button></p>
 </div></template>
 <script setup lang="ts">
-const frontmatter = {"name":"My Cool App"}
+const frontmatter = defineProps({name:{default:\`My Cool App\`},})
 defineExpose({ frontmatter })
 function onClick() {
   // ...

From 177e0d9d5f27352c3d26dc07e4d30bb3afb8f198 Mon Sep 17 00:00:00 2001
From: Runyasak Chaengnaimuang <runyasak.c@gmail.com>
Date: Sat, 7 Dec 2024 16:13:50 +0700
Subject: [PATCH 2/7] update README

---
 README.md | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/README.md b/README.md
index 76e99ff..52114f0 100644
--- a/README.md
+++ b/README.md
@@ -173,6 +173,24 @@ Will be rendered as
 <p>This is My Cool App</p>
 ```
 
+You can override the existing frontmatter values by passing a props value to the component.
+
+```html
+<template>
+  <HelloWorld name="My Awesome App"  />
+</template>
+
+<script>
+import HelloWorld from './README.md'
+
+export default {
+  components: {
+    HelloWorld,
+  },
+}
+</script>
+```
+
 It will also be passed to the wrapper component's props if you have set `wrapperComponent` option.
 
 ## Document head and meta

From 39a2460c616a935d570b08e11b836d9e842275fa Mon Sep 17 00:00:00 2001
From: Runyasak Chaengnaimuang <runyasak.c@gmail.com>
Date: Sun, 15 Dec 2024 21:40:26 +0700
Subject: [PATCH 3/7] feat: add frontmatterMerge props

---
 src/core/markdown.ts                      | 27 +++------
 test/__snapshots__/excerpt.test.ts.snap   | 14 +++--
 test/__snapshots__/transform.test.ts.snap | 68 ++++++++++++++++-------
 3 files changed, 66 insertions(+), 43 deletions(-)

diff --git a/src/core/markdown.ts b/src/core/markdown.ts
index 17dc520..1b6d5d9 100644
--- a/src/core/markdown.ts
+++ b/src/core/markdown.ts
@@ -61,24 +61,6 @@ function extractCustomBlock(html: string, options: ResolvedOptions) {
   return { html, blocks }
 }
 
-function createDefinePropsWithDefaults(props: {
-  [s: string]: unknown
-}) {
-  const propsValue = Object
-    .entries(props)
-    .reduce((acc, [key, cur]) => `${acc}${key}:{default:${getPropsDefaultValue(cur)}},`, ``)
-
-  return `defineProps({${propsValue}})`
-}
-
-function getPropsDefaultValue<T = unknown>(value: T) {
-  return typeof value === 'string'
-    ? `\`${value}\``
-    : typeof value === 'object'
-      ? JSON.stringify(value)
-      : value
-}
-
 export function createMarkdown(options: ResolvedOptions) {
   const isVue2 = options.vueVersion.startsWith('2.')
 
@@ -189,7 +171,12 @@ export function createMarkdown(options: ResolvedOptions) {
       if (options.excerpt && !excerptKeyOverlapping && frontmatter.excerpt !== undefined)
         delete frontmatter.excerpt
 
-      scriptLines.push(`const frontmatter = ${createDefinePropsWithDefaults(frontmatter)}`)
+      scriptLines.push(
+        `import { computed } from 'vue'`,
+        `const props = ${`defineProps({ frontmatterMerge: { default: ${JSON.stringify(frontmatter)} } })`}`,
+        `const _frontmatter = ${JSON.stringify(frontmatter)}`,
+        'const frontmatter = computed(() => ({ ..._frontmatter, ...props.frontmatterMerge }))',
+      )
 
       if (options.exportFrontmatter) {
         frontmatterExportsLines = Object.entries(frontmatter)
@@ -201,7 +188,7 @@ export function createMarkdown(options: ResolvedOptions) {
       }
 
       if (!isVue2 && options.exposeFrontmatter && !hasExplicitExports())
-        scriptLines.push('defineExpose({ frontmatter })')
+        scriptLines.push('defineExpose({ frontmatter: _frontmatter })')
 
       if (!isVue2 && headEnabled && head) {
         // @ts-expect-error legacy option
diff --git a/test/__snapshots__/excerpt.test.ts.snap b/test/__snapshots__/excerpt.test.ts.snap
index cc38038..8238e30 100644
--- a/test/__snapshots__/excerpt.test.ts.snap
+++ b/test/__snapshots__/excerpt.test.ts.snap
@@ -11,8 +11,11 @@ exports[`excerpt > raw excerpt 1`] = `
 </ul>
 </div></template>
 <script setup>
-const frontmatter = defineProps({title:{default:\`Hey\`},})
-defineExpose({ frontmatter })
+import { computed } from 'vue'
+const props = defineProps({ frontmatterMerge: { default: {"title":"Hey"} } })
+const _frontmatter = {"title":"Hey"}
+const frontmatter = computed(() => ({ ..._frontmatter, ...props.frontmatterMerge }))
+defineExpose({ frontmatter: _frontmatter })
 const excerpt = "\\nThis is an excerpt which is kept as **raw Markdown**.\\n\\n"
 </script>
 <script>
@@ -32,8 +35,11 @@ exports[`excerpt > rendered excerpt 1`] = `
 </ul>
 </div></template>
 <script setup>
-const frontmatter = defineProps({title:{default:\`Hey\`},})
-defineExpose({ frontmatter })
+import { computed } from 'vue'
+const props = defineProps({ frontmatterMerge: { default: {"title":"Hey"} } })
+const _frontmatter = {"title":"Hey"}
+const frontmatter = computed(() => ({ ..._frontmatter, ...props.frontmatterMerge }))
+defineExpose({ frontmatter: _frontmatter })
 const excerpt = "<p>This is an excerpt which has been rendered to <strong>HTML</strong>.</p>\\n"
 </script>
 <script>
diff --git a/test/__snapshots__/transform.test.ts.snap b/test/__snapshots__/transform.test.ts.snap
index 3b09a34..68e5ced 100644
--- a/test/__snapshots__/transform.test.ts.snap
+++ b/test/__snapshots__/transform.test.ts.snap
@@ -9,8 +9,11 @@ exports[`transform > basic 1`] = `
 </ul>
 </div></template>
 <script setup>
-const frontmatter = defineProps({title:{default:\`Hey\`},})
-defineExpose({ frontmatter })
+import { computed } from 'vue'
+const props = defineProps({ frontmatterMerge: { default: {"title":"Hey"} } })
+const _frontmatter = {"title":"Hey"}
+const frontmatter = computed(() => ({ ..._frontmatter, ...props.frontmatterMerge }))
+defineExpose({ frontmatter: _frontmatter })
 </script>
 <script>
 export const title = "Hey"
@@ -23,8 +26,11 @@ exports[`transform > code escape 1`] = `
 </code></pre>
 </div></template>
 <script setup>
-const frontmatter = defineProps({})
-defineExpose({ frontmatter })
+import { computed } from 'vue'
+const props = defineProps({ frontmatterMerge: { default: {} } })
+const _frontmatter = {}
+const frontmatter = computed(() => ({ ..._frontmatter, ...props.frontmatterMerge }))
+defineExpose({ frontmatter: _frontmatter })
 </script>"
 `;
 
@@ -32,7 +38,10 @@ exports[`transform > couldn't expose frontmatter 1`] = `
 "<template><div class="markdown-body">
 </div></template>
 <script setup>
-const frontmatter = defineProps({title:{default:\`Hey\`},})
+import { computed } from 'vue'
+const props = defineProps({ frontmatterMerge: { default: {"title":"Hey"} } })
+const _frontmatter = {"title":"Hey"}
+const frontmatter = computed(() => ({ ..._frontmatter, ...props.frontmatterMerge }))
 defineExpose({ test: 'test'})
 </script>
 <script>
@@ -46,8 +55,11 @@ exports[`transform > escapeCodeTagInterpolation 1`] = `
 </code></pre>
 </div></template>
 <script setup>
-const frontmatter = defineProps({})
-defineExpose({ frontmatter })
+import { computed } from 'vue'
+const props = defineProps({ frontmatterMerge: { default: {} } })
+const _frontmatter = {}
+const frontmatter = computed(() => ({ ..._frontmatter, ...props.frontmatterMerge }))
+defineExpose({ frontmatter: _frontmatter })
 </script>"
 `;
 
@@ -55,8 +67,11 @@ exports[`transform > export keyword frontmatters 1`] = `
 "<template><div class="markdown-body"><p>Hello</p>
 </div></template>
 <script setup>
-const frontmatter = defineProps({class:{default:\`text\`},default:{default:\`foo\`},})
-defineExpose({ frontmatter })
+import { computed } from 'vue'
+const props = defineProps({ frontmatterMerge: { default: {"class":"text","default":"foo"} } })
+const _frontmatter = {"class":"text","default":"foo"}
+const frontmatter = computed(() => ({ ..._frontmatter, ...props.frontmatterMerge }))
+defineExpose({ frontmatter: _frontmatter })
 </script>
 <script>
 export const _class = "text"
@@ -68,8 +83,11 @@ exports[`transform > exposes frontmatter 1`] = `
 "<template><div class="markdown-body"><h1>Hello</h1>
 </div></template>
 <script setup>
-const frontmatter = defineProps({title:{default:\`Hey\`},})
-defineExpose({ frontmatter })
+import { computed } from 'vue'
+const props = defineProps({ frontmatterMerge: { default: {"title":"Hey"} } })
+const _frontmatter = {"title":"Hey"}
+const frontmatter = computed(() => ({ ..._frontmatter, ...props.frontmatterMerge }))
+defineExpose({ frontmatter: _frontmatter })
 </script>
 <script>
 export const title = "Hey"
@@ -81,8 +99,11 @@ exports[`transform > frontmatter interpolation 1`] = `
 <p>This is {{frontmatter.name}}</p>
 </div></template>
 <script setup>
-const frontmatter = defineProps({name:{default:\`My Cool App\`},})
-defineExpose({ frontmatter })
+import { computed } from 'vue'
+const props = defineProps({ frontmatterMerge: { default: {"name":"My Cool App"} } })
+const _frontmatter = {"name":"My Cool App"}
+const frontmatter = computed(() => ({ ..._frontmatter, ...props.frontmatterMerge }))
+defineExpose({ frontmatter: _frontmatter })
 </script>
 <script>
 export const name = "My Cool App"
@@ -94,8 +115,11 @@ exports[`transform > script setup 1`] = `
 
 </div></template>
 <script setup lang="ts">
-const frontmatter = defineProps({})
-defineExpose({ frontmatter })
+import { computed } from 'vue'
+const props = defineProps({ frontmatterMerge: { default: {} } })
+const _frontmatter = {}
+const frontmatter = computed(() => ({ ..._frontmatter, ...props.frontmatterMerge }))
+defineExpose({ frontmatter: _frontmatter })
 import Foo from './Foo.vue'
 </script>"
 `;
@@ -105,8 +129,11 @@ exports[`transform > style 1`] = `
 
 </div></template>
 <script setup>
-const frontmatter = defineProps({})
-defineExpose({ frontmatter })
+import { computed } from 'vue'
+const props = defineProps({ frontmatterMerge: { default: {} } })
+const _frontmatter = {}
+const frontmatter = computed(() => ({ ..._frontmatter, ...props.frontmatterMerge }))
+defineExpose({ frontmatter: _frontmatter })
 </script>
 <style>h1 { color: red }</style>"
 `;
@@ -116,8 +143,11 @@ exports[`transform > vue directives 1`] = `
 <p><button @click="onClick"></button></p>
 </div></template>
 <script setup lang="ts">
-const frontmatter = defineProps({name:{default:\`My Cool App\`},})
-defineExpose({ frontmatter })
+import { computed } from 'vue'
+const props = defineProps({ frontmatterMerge: { default: {"name":"My Cool App"} } })
+const _frontmatter = {"name":"My Cool App"}
+const frontmatter = computed(() => ({ ..._frontmatter, ...props.frontmatterMerge }))
+defineExpose({ frontmatter: _frontmatter })
 function onClick() {
   // ...
 }

From 3db6ed77b1f3a327e0ff8c6558fc3a31147267e5 Mon Sep 17 00:00:00 2001
From: Runyasak Chaengnaimuang <runyasak.c@gmail.com>
Date: Sun, 15 Dec 2024 21:55:32 +0700
Subject: [PATCH 4/7] fix: remove frontmatterMerge default

---
 src/core/markdown.ts                      |  2 +-
 test/__snapshots__/excerpt.test.ts.snap   |  4 ++--
 test/__snapshots__/transform.test.ts.snap | 20 ++++++++++----------
 3 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/core/markdown.ts b/src/core/markdown.ts
index 1b6d5d9..70203b5 100644
--- a/src/core/markdown.ts
+++ b/src/core/markdown.ts
@@ -173,7 +173,7 @@ export function createMarkdown(options: ResolvedOptions) {
 
       scriptLines.push(
         `import { computed } from 'vue'`,
-        `const props = ${`defineProps({ frontmatterMerge: { default: ${JSON.stringify(frontmatter)} } })`}`,
+        'const props = defineProps({ frontmatterMerge: { type: Object } })',
         `const _frontmatter = ${JSON.stringify(frontmatter)}`,
         'const frontmatter = computed(() => ({ ..._frontmatter, ...props.frontmatterMerge }))',
       )
diff --git a/test/__snapshots__/excerpt.test.ts.snap b/test/__snapshots__/excerpt.test.ts.snap
index 8238e30..4627a59 100644
--- a/test/__snapshots__/excerpt.test.ts.snap
+++ b/test/__snapshots__/excerpt.test.ts.snap
@@ -12,7 +12,7 @@ exports[`excerpt > raw excerpt 1`] = `
 </div></template>
 <script setup>
 import { computed } from 'vue'
-const props = defineProps({ frontmatterMerge: { default: {"title":"Hey"} } })
+const props = defineProps({ frontmatterMerge: { type: Object } })
 const _frontmatter = {"title":"Hey"}
 const frontmatter = computed(() => ({ ..._frontmatter, ...props.frontmatterMerge }))
 defineExpose({ frontmatter: _frontmatter })
@@ -36,7 +36,7 @@ exports[`excerpt > rendered excerpt 1`] = `
 </div></template>
 <script setup>
 import { computed } from 'vue'
-const props = defineProps({ frontmatterMerge: { default: {"title":"Hey"} } })
+const props = defineProps({ frontmatterMerge: { type: Object } })
 const _frontmatter = {"title":"Hey"}
 const frontmatter = computed(() => ({ ..._frontmatter, ...props.frontmatterMerge }))
 defineExpose({ frontmatter: _frontmatter })
diff --git a/test/__snapshots__/transform.test.ts.snap b/test/__snapshots__/transform.test.ts.snap
index 68e5ced..a6bbad8 100644
--- a/test/__snapshots__/transform.test.ts.snap
+++ b/test/__snapshots__/transform.test.ts.snap
@@ -10,7 +10,7 @@ exports[`transform > basic 1`] = `
 </div></template>
 <script setup>
 import { computed } from 'vue'
-const props = defineProps({ frontmatterMerge: { default: {"title":"Hey"} } })
+const props = defineProps({ frontmatterMerge: { type: Object } })
 const _frontmatter = {"title":"Hey"}
 const frontmatter = computed(() => ({ ..._frontmatter, ...props.frontmatterMerge }))
 defineExpose({ frontmatter: _frontmatter })
@@ -27,7 +27,7 @@ exports[`transform > code escape 1`] = `
 </div></template>
 <script setup>
 import { computed } from 'vue'
-const props = defineProps({ frontmatterMerge: { default: {} } })
+const props = defineProps({ frontmatterMerge: { type: Object } })
 const _frontmatter = {}
 const frontmatter = computed(() => ({ ..._frontmatter, ...props.frontmatterMerge }))
 defineExpose({ frontmatter: _frontmatter })
@@ -39,7 +39,7 @@ exports[`transform > couldn't expose frontmatter 1`] = `
 </div></template>
 <script setup>
 import { computed } from 'vue'
-const props = defineProps({ frontmatterMerge: { default: {"title":"Hey"} } })
+const props = defineProps({ frontmatterMerge: { type: Object } })
 const _frontmatter = {"title":"Hey"}
 const frontmatter = computed(() => ({ ..._frontmatter, ...props.frontmatterMerge }))
 defineExpose({ test: 'test'})
@@ -56,7 +56,7 @@ exports[`transform > escapeCodeTagInterpolation 1`] = `
 </div></template>
 <script setup>
 import { computed } from 'vue'
-const props = defineProps({ frontmatterMerge: { default: {} } })
+const props = defineProps({ frontmatterMerge: { type: Object } })
 const _frontmatter = {}
 const frontmatter = computed(() => ({ ..._frontmatter, ...props.frontmatterMerge }))
 defineExpose({ frontmatter: _frontmatter })
@@ -68,7 +68,7 @@ exports[`transform > export keyword frontmatters 1`] = `
 </div></template>
 <script setup>
 import { computed } from 'vue'
-const props = defineProps({ frontmatterMerge: { default: {"class":"text","default":"foo"} } })
+const props = defineProps({ frontmatterMerge: { type: Object } })
 const _frontmatter = {"class":"text","default":"foo"}
 const frontmatter = computed(() => ({ ..._frontmatter, ...props.frontmatterMerge }))
 defineExpose({ frontmatter: _frontmatter })
@@ -84,7 +84,7 @@ exports[`transform > exposes frontmatter 1`] = `
 </div></template>
 <script setup>
 import { computed } from 'vue'
-const props = defineProps({ frontmatterMerge: { default: {"title":"Hey"} } })
+const props = defineProps({ frontmatterMerge: { type: Object } })
 const _frontmatter = {"title":"Hey"}
 const frontmatter = computed(() => ({ ..._frontmatter, ...props.frontmatterMerge }))
 defineExpose({ frontmatter: _frontmatter })
@@ -100,7 +100,7 @@ exports[`transform > frontmatter interpolation 1`] = `
 </div></template>
 <script setup>
 import { computed } from 'vue'
-const props = defineProps({ frontmatterMerge: { default: {"name":"My Cool App"} } })
+const props = defineProps({ frontmatterMerge: { type: Object } })
 const _frontmatter = {"name":"My Cool App"}
 const frontmatter = computed(() => ({ ..._frontmatter, ...props.frontmatterMerge }))
 defineExpose({ frontmatter: _frontmatter })
@@ -116,7 +116,7 @@ exports[`transform > script setup 1`] = `
 </div></template>
 <script setup lang="ts">
 import { computed } from 'vue'
-const props = defineProps({ frontmatterMerge: { default: {} } })
+const props = defineProps({ frontmatterMerge: { type: Object } })
 const _frontmatter = {}
 const frontmatter = computed(() => ({ ..._frontmatter, ...props.frontmatterMerge }))
 defineExpose({ frontmatter: _frontmatter })
@@ -130,7 +130,7 @@ exports[`transform > style 1`] = `
 </div></template>
 <script setup>
 import { computed } from 'vue'
-const props = defineProps({ frontmatterMerge: { default: {} } })
+const props = defineProps({ frontmatterMerge: { type: Object } })
 const _frontmatter = {}
 const frontmatter = computed(() => ({ ..._frontmatter, ...props.frontmatterMerge }))
 defineExpose({ frontmatter: _frontmatter })
@@ -144,7 +144,7 @@ exports[`transform > vue directives 1`] = `
 </div></template>
 <script setup lang="ts">
 import { computed } from 'vue'
-const props = defineProps({ frontmatterMerge: { default: {"name":"My Cool App"} } })
+const props = defineProps({ frontmatterMerge: { type: Object } })
 const _frontmatter = {"name":"My Cool App"}
 const frontmatter = computed(() => ({ ..._frontmatter, ...props.frontmatterMerge }))
 defineExpose({ frontmatter: _frontmatter })

From a7ec58efb34ad84a7a2c2971cafdcdc6cd2a254d Mon Sep 17 00:00:00 2001
From: Runyasak Chaengnaimuang <runyasak.c@gmail.com>
Date: Sun, 15 Dec 2024 22:03:59 +0700
Subject: [PATCH 5/7] fix: remove _frontmatter

---
 src/core/markdown.ts                      |  5 +--
 test/__snapshots__/excerpt.test.ts.snap   | 10 ++---
 test/__snapshots__/transform.test.ts.snap | 48 +++++++++--------------
 3 files changed, 25 insertions(+), 38 deletions(-)

diff --git a/src/core/markdown.ts b/src/core/markdown.ts
index 70203b5..400921b 100644
--- a/src/core/markdown.ts
+++ b/src/core/markdown.ts
@@ -174,8 +174,7 @@ export function createMarkdown(options: ResolvedOptions) {
       scriptLines.push(
         `import { computed } from 'vue'`,
         'const props = defineProps({ frontmatterMerge: { type: Object } })',
-        `const _frontmatter = ${JSON.stringify(frontmatter)}`,
-        'const frontmatter = computed(() => ({ ..._frontmatter, ...props.frontmatterMerge }))',
+        `const frontmatter = computed(() => ({ ...${JSON.stringify(frontmatter)}, ...props.frontmatterMerge }))`,
       )
 
       if (options.exportFrontmatter) {
@@ -188,7 +187,7 @@ export function createMarkdown(options: ResolvedOptions) {
       }
 
       if (!isVue2 && options.exposeFrontmatter && !hasExplicitExports())
-        scriptLines.push('defineExpose({ frontmatter: _frontmatter })')
+        scriptLines.push('defineExpose({ frontmatter: frontmatter.value })')
 
       if (!isVue2 && headEnabled && head) {
         // @ts-expect-error legacy option
diff --git a/test/__snapshots__/excerpt.test.ts.snap b/test/__snapshots__/excerpt.test.ts.snap
index 4627a59..04ca2f0 100644
--- a/test/__snapshots__/excerpt.test.ts.snap
+++ b/test/__snapshots__/excerpt.test.ts.snap
@@ -13,9 +13,8 @@ exports[`excerpt > raw excerpt 1`] = `
 <script setup>
 import { computed } from 'vue'
 const props = defineProps({ frontmatterMerge: { type: Object } })
-const _frontmatter = {"title":"Hey"}
-const frontmatter = computed(() => ({ ..._frontmatter, ...props.frontmatterMerge }))
-defineExpose({ frontmatter: _frontmatter })
+const frontmatter = computed(() => ({ ...{"title":"Hey"}, ...props.frontmatterMerge }))
+defineExpose({ frontmatter: frontmatter.value })
 const excerpt = "\\nThis is an excerpt which is kept as **raw Markdown**.\\n\\n"
 </script>
 <script>
@@ -37,9 +36,8 @@ exports[`excerpt > rendered excerpt 1`] = `
 <script setup>
 import { computed } from 'vue'
 const props = defineProps({ frontmatterMerge: { type: Object } })
-const _frontmatter = {"title":"Hey"}
-const frontmatter = computed(() => ({ ..._frontmatter, ...props.frontmatterMerge }))
-defineExpose({ frontmatter: _frontmatter })
+const frontmatter = computed(() => ({ ...{"title":"Hey"}, ...props.frontmatterMerge }))
+defineExpose({ frontmatter: frontmatter.value })
 const excerpt = "<p>This is an excerpt which has been rendered to <strong>HTML</strong>.</p>\\n"
 </script>
 <script>
diff --git a/test/__snapshots__/transform.test.ts.snap b/test/__snapshots__/transform.test.ts.snap
index a6bbad8..dc1ffe2 100644
--- a/test/__snapshots__/transform.test.ts.snap
+++ b/test/__snapshots__/transform.test.ts.snap
@@ -11,9 +11,8 @@ exports[`transform > basic 1`] = `
 <script setup>
 import { computed } from 'vue'
 const props = defineProps({ frontmatterMerge: { type: Object } })
-const _frontmatter = {"title":"Hey"}
-const frontmatter = computed(() => ({ ..._frontmatter, ...props.frontmatterMerge }))
-defineExpose({ frontmatter: _frontmatter })
+const frontmatter = computed(() => ({ ...{"title":"Hey"}, ...props.frontmatterMerge }))
+defineExpose({ frontmatter: frontmatter.value })
 </script>
 <script>
 export const title = "Hey"
@@ -28,9 +27,8 @@ exports[`transform > code escape 1`] = `
 <script setup>
 import { computed } from 'vue'
 const props = defineProps({ frontmatterMerge: { type: Object } })
-const _frontmatter = {}
-const frontmatter = computed(() => ({ ..._frontmatter, ...props.frontmatterMerge }))
-defineExpose({ frontmatter: _frontmatter })
+const frontmatter = computed(() => ({ ...{}, ...props.frontmatterMerge }))
+defineExpose({ frontmatter: frontmatter.value })
 </script>"
 `;
 
@@ -40,8 +38,7 @@ exports[`transform > couldn't expose frontmatter 1`] = `
 <script setup>
 import { computed } from 'vue'
 const props = defineProps({ frontmatterMerge: { type: Object } })
-const _frontmatter = {"title":"Hey"}
-const frontmatter = computed(() => ({ ..._frontmatter, ...props.frontmatterMerge }))
+const frontmatter = computed(() => ({ ...{"title":"Hey"}, ...props.frontmatterMerge }))
 defineExpose({ test: 'test'})
 </script>
 <script>
@@ -57,9 +54,8 @@ exports[`transform > escapeCodeTagInterpolation 1`] = `
 <script setup>
 import { computed } from 'vue'
 const props = defineProps({ frontmatterMerge: { type: Object } })
-const _frontmatter = {}
-const frontmatter = computed(() => ({ ..._frontmatter, ...props.frontmatterMerge }))
-defineExpose({ frontmatter: _frontmatter })
+const frontmatter = computed(() => ({ ...{}, ...props.frontmatterMerge }))
+defineExpose({ frontmatter: frontmatter.value })
 </script>"
 `;
 
@@ -69,9 +65,8 @@ exports[`transform > export keyword frontmatters 1`] = `
 <script setup>
 import { computed } from 'vue'
 const props = defineProps({ frontmatterMerge: { type: Object } })
-const _frontmatter = {"class":"text","default":"foo"}
-const frontmatter = computed(() => ({ ..._frontmatter, ...props.frontmatterMerge }))
-defineExpose({ frontmatter: _frontmatter })
+const frontmatter = computed(() => ({ ...{"class":"text","default":"foo"}, ...props.frontmatterMerge }))
+defineExpose({ frontmatter: frontmatter.value })
 </script>
 <script>
 export const _class = "text"
@@ -85,9 +80,8 @@ exports[`transform > exposes frontmatter 1`] = `
 <script setup>
 import { computed } from 'vue'
 const props = defineProps({ frontmatterMerge: { type: Object } })
-const _frontmatter = {"title":"Hey"}
-const frontmatter = computed(() => ({ ..._frontmatter, ...props.frontmatterMerge }))
-defineExpose({ frontmatter: _frontmatter })
+const frontmatter = computed(() => ({ ...{"title":"Hey"}, ...props.frontmatterMerge }))
+defineExpose({ frontmatter: frontmatter.value })
 </script>
 <script>
 export const title = "Hey"
@@ -101,9 +95,8 @@ exports[`transform > frontmatter interpolation 1`] = `
 <script setup>
 import { computed } from 'vue'
 const props = defineProps({ frontmatterMerge: { type: Object } })
-const _frontmatter = {"name":"My Cool App"}
-const frontmatter = computed(() => ({ ..._frontmatter, ...props.frontmatterMerge }))
-defineExpose({ frontmatter: _frontmatter })
+const frontmatter = computed(() => ({ ...{"name":"My Cool App"}, ...props.frontmatterMerge }))
+defineExpose({ frontmatter: frontmatter.value })
 </script>
 <script>
 export const name = "My Cool App"
@@ -117,9 +110,8 @@ exports[`transform > script setup 1`] = `
 <script setup lang="ts">
 import { computed } from 'vue'
 const props = defineProps({ frontmatterMerge: { type: Object } })
-const _frontmatter = {}
-const frontmatter = computed(() => ({ ..._frontmatter, ...props.frontmatterMerge }))
-defineExpose({ frontmatter: _frontmatter })
+const frontmatter = computed(() => ({ ...{}, ...props.frontmatterMerge }))
+defineExpose({ frontmatter: frontmatter.value })
 import Foo from './Foo.vue'
 </script>"
 `;
@@ -131,9 +123,8 @@ exports[`transform > style 1`] = `
 <script setup>
 import { computed } from 'vue'
 const props = defineProps({ frontmatterMerge: { type: Object } })
-const _frontmatter = {}
-const frontmatter = computed(() => ({ ..._frontmatter, ...props.frontmatterMerge }))
-defineExpose({ frontmatter: _frontmatter })
+const frontmatter = computed(() => ({ ...{}, ...props.frontmatterMerge }))
+defineExpose({ frontmatter: frontmatter.value })
 </script>
 <style>h1 { color: red }</style>"
 `;
@@ -145,9 +136,8 @@ exports[`transform > vue directives 1`] = `
 <script setup lang="ts">
 import { computed } from 'vue'
 const props = defineProps({ frontmatterMerge: { type: Object } })
-const _frontmatter = {"name":"My Cool App"}
-const frontmatter = computed(() => ({ ..._frontmatter, ...props.frontmatterMerge }))
-defineExpose({ frontmatter: _frontmatter })
+const frontmatter = computed(() => ({ ...{"name":"My Cool App"}, ...props.frontmatterMerge }))
+defineExpose({ frontmatter: frontmatter.value })
 function onClick() {
   // ...
 }

From 92c8f83151236fec76c4663b1c1af6af09defc54 Mon Sep 17 00:00:00 2001
From: Runyasak Chaengnaimuang <runyasak.c@gmail.com>
Date: Sun, 15 Dec 2024 22:49:05 +0700
Subject: [PATCH 6/7] feat: add frontmatterReplace props

---
 src/core/markdown.ts                      |  10 ++-
 test/__snapshots__/excerpt.test.ts.snap   |  20 ++++-
 test/__snapshots__/transform.test.ts.snap | 100 +++++++++++++++++++---
 3 files changed, 117 insertions(+), 13 deletions(-)

diff --git a/src/core/markdown.ts b/src/core/markdown.ts
index 400921b..92ef599 100644
--- a/src/core/markdown.ts
+++ b/src/core/markdown.ts
@@ -174,7 +174,15 @@ export function createMarkdown(options: ResolvedOptions) {
       scriptLines.push(
         `import { computed } from 'vue'`,
         'const props = defineProps({ frontmatterMerge: { type: Object } })',
-        `const frontmatter = computed(() => ({ ...${JSON.stringify(frontmatter)}, ...props.frontmatterMerge }))`,
+        `const _frontmatter = ${JSON.stringify(frontmatter)}`,
+        `const frontmatter = computed(() => {
+  if (props.frontmatterReplace && typeof props.frontmatterReplace === 'object') {
+    const replaceKeys = Object.keys(props.frontmatterReplace)
+    return Object.entries(_frontmatter).reduce((acc, [key, value]) => ({ ...acc, [key]: replaceKeys.includes(key) ? value : undefined }), {})
+  }
+
+  return { ..._frontmatter, ...props.frontmatterMerge }
+})`,
       )
 
       if (options.exportFrontmatter) {
diff --git a/test/__snapshots__/excerpt.test.ts.snap b/test/__snapshots__/excerpt.test.ts.snap
index 04ca2f0..0ae9c97 100644
--- a/test/__snapshots__/excerpt.test.ts.snap
+++ b/test/__snapshots__/excerpt.test.ts.snap
@@ -13,7 +13,15 @@ exports[`excerpt > raw excerpt 1`] = `
 <script setup>
 import { computed } from 'vue'
 const props = defineProps({ frontmatterMerge: { type: Object } })
-const frontmatter = computed(() => ({ ...{"title":"Hey"}, ...props.frontmatterMerge }))
+const _frontmatter = {"title":"Hey"}
+const frontmatter = computed(() => {
+  if (props.frontmatterReplace && typeof props.frontmatterReplace === 'object') {
+    const replaceKeys = Object.keys(props.frontmatterReplace)
+    return Object.entries(_frontmatter).reduce((acc, [key, value]) => ({ ...acc, [key]: replaceKeys.includes(key) ? value : undefined }), {})
+  }
+
+  return { ..._frontmatter, ...props.frontmatterMerge }
+})
 defineExpose({ frontmatter: frontmatter.value })
 const excerpt = "\\nThis is an excerpt which is kept as **raw Markdown**.\\n\\n"
 </script>
@@ -36,7 +44,15 @@ exports[`excerpt > rendered excerpt 1`] = `
 <script setup>
 import { computed } from 'vue'
 const props = defineProps({ frontmatterMerge: { type: Object } })
-const frontmatter = computed(() => ({ ...{"title":"Hey"}, ...props.frontmatterMerge }))
+const _frontmatter = {"title":"Hey"}
+const frontmatter = computed(() => {
+  if (props.frontmatterReplace && typeof props.frontmatterReplace === 'object') {
+    const replaceKeys = Object.keys(props.frontmatterReplace)
+    return Object.entries(_frontmatter).reduce((acc, [key, value]) => ({ ...acc, [key]: replaceKeys.includes(key) ? value : undefined }), {})
+  }
+
+  return { ..._frontmatter, ...props.frontmatterMerge }
+})
 defineExpose({ frontmatter: frontmatter.value })
 const excerpt = "<p>This is an excerpt which has been rendered to <strong>HTML</strong>.</p>\\n"
 </script>
diff --git a/test/__snapshots__/transform.test.ts.snap b/test/__snapshots__/transform.test.ts.snap
index dc1ffe2..438a206 100644
--- a/test/__snapshots__/transform.test.ts.snap
+++ b/test/__snapshots__/transform.test.ts.snap
@@ -11,7 +11,15 @@ exports[`transform > basic 1`] = `
 <script setup>
 import { computed } from 'vue'
 const props = defineProps({ frontmatterMerge: { type: Object } })
-const frontmatter = computed(() => ({ ...{"title":"Hey"}, ...props.frontmatterMerge }))
+const _frontmatter = {"title":"Hey"}
+const frontmatter = computed(() => {
+  if (props.frontmatterReplace && typeof props.frontmatterReplace === 'object') {
+    const replaceKeys = Object.keys(props.frontmatterReplace)
+    return Object.entries(_frontmatter).reduce((acc, [key, value]) => ({ ...acc, [key]: replaceKeys.includes(key) ? value : undefined }), {})
+  }
+
+  return { ..._frontmatter, ...props.frontmatterMerge }
+})
 defineExpose({ frontmatter: frontmatter.value })
 </script>
 <script>
@@ -27,7 +35,15 @@ exports[`transform > code escape 1`] = `
 <script setup>
 import { computed } from 'vue'
 const props = defineProps({ frontmatterMerge: { type: Object } })
-const frontmatter = computed(() => ({ ...{}, ...props.frontmatterMerge }))
+const _frontmatter = {}
+const frontmatter = computed(() => {
+  if (props.frontmatterReplace && typeof props.frontmatterReplace === 'object') {
+    const replaceKeys = Object.keys(props.frontmatterReplace)
+    return Object.entries(_frontmatter).reduce((acc, [key, value]) => ({ ...acc, [key]: replaceKeys.includes(key) ? value : undefined }), {})
+  }
+
+  return { ..._frontmatter, ...props.frontmatterMerge }
+})
 defineExpose({ frontmatter: frontmatter.value })
 </script>"
 `;
@@ -38,7 +54,15 @@ exports[`transform > couldn't expose frontmatter 1`] = `
 <script setup>
 import { computed } from 'vue'
 const props = defineProps({ frontmatterMerge: { type: Object } })
-const frontmatter = computed(() => ({ ...{"title":"Hey"}, ...props.frontmatterMerge }))
+const _frontmatter = {"title":"Hey"}
+const frontmatter = computed(() => {
+  if (props.frontmatterReplace && typeof props.frontmatterReplace === 'object') {
+    const replaceKeys = Object.keys(props.frontmatterReplace)
+    return Object.entries(_frontmatter).reduce((acc, [key, value]) => ({ ...acc, [key]: replaceKeys.includes(key) ? value : undefined }), {})
+  }
+
+  return { ..._frontmatter, ...props.frontmatterMerge }
+})
 defineExpose({ test: 'test'})
 </script>
 <script>
@@ -54,7 +78,15 @@ exports[`transform > escapeCodeTagInterpolation 1`] = `
 <script setup>
 import { computed } from 'vue'
 const props = defineProps({ frontmatterMerge: { type: Object } })
-const frontmatter = computed(() => ({ ...{}, ...props.frontmatterMerge }))
+const _frontmatter = {}
+const frontmatter = computed(() => {
+  if (props.frontmatterReplace && typeof props.frontmatterReplace === 'object') {
+    const replaceKeys = Object.keys(props.frontmatterReplace)
+    return Object.entries(_frontmatter).reduce((acc, [key, value]) => ({ ...acc, [key]: replaceKeys.includes(key) ? value : undefined }), {})
+  }
+
+  return { ..._frontmatter, ...props.frontmatterMerge }
+})
 defineExpose({ frontmatter: frontmatter.value })
 </script>"
 `;
@@ -65,7 +97,15 @@ exports[`transform > export keyword frontmatters 1`] = `
 <script setup>
 import { computed } from 'vue'
 const props = defineProps({ frontmatterMerge: { type: Object } })
-const frontmatter = computed(() => ({ ...{"class":"text","default":"foo"}, ...props.frontmatterMerge }))
+const _frontmatter = {"class":"text","default":"foo"}
+const frontmatter = computed(() => {
+  if (props.frontmatterReplace && typeof props.frontmatterReplace === 'object') {
+    const replaceKeys = Object.keys(props.frontmatterReplace)
+    return Object.entries(_frontmatter).reduce((acc, [key, value]) => ({ ...acc, [key]: replaceKeys.includes(key) ? value : undefined }), {})
+  }
+
+  return { ..._frontmatter, ...props.frontmatterMerge }
+})
 defineExpose({ frontmatter: frontmatter.value })
 </script>
 <script>
@@ -80,7 +120,15 @@ exports[`transform > exposes frontmatter 1`] = `
 <script setup>
 import { computed } from 'vue'
 const props = defineProps({ frontmatterMerge: { type: Object } })
-const frontmatter = computed(() => ({ ...{"title":"Hey"}, ...props.frontmatterMerge }))
+const _frontmatter = {"title":"Hey"}
+const frontmatter = computed(() => {
+  if (props.frontmatterReplace && typeof props.frontmatterReplace === 'object') {
+    const replaceKeys = Object.keys(props.frontmatterReplace)
+    return Object.entries(_frontmatter).reduce((acc, [key, value]) => ({ ...acc, [key]: replaceKeys.includes(key) ? value : undefined }), {})
+  }
+
+  return { ..._frontmatter, ...props.frontmatterMerge }
+})
 defineExpose({ frontmatter: frontmatter.value })
 </script>
 <script>
@@ -95,7 +143,15 @@ exports[`transform > frontmatter interpolation 1`] = `
 <script setup>
 import { computed } from 'vue'
 const props = defineProps({ frontmatterMerge: { type: Object } })
-const frontmatter = computed(() => ({ ...{"name":"My Cool App"}, ...props.frontmatterMerge }))
+const _frontmatter = {"name":"My Cool App"}
+const frontmatter = computed(() => {
+  if (props.frontmatterReplace && typeof props.frontmatterReplace === 'object') {
+    const replaceKeys = Object.keys(props.frontmatterReplace)
+    return Object.entries(_frontmatter).reduce((acc, [key, value]) => ({ ...acc, [key]: replaceKeys.includes(key) ? value : undefined }), {})
+  }
+
+  return { ..._frontmatter, ...props.frontmatterMerge }
+})
 defineExpose({ frontmatter: frontmatter.value })
 </script>
 <script>
@@ -110,7 +166,15 @@ exports[`transform > script setup 1`] = `
 <script setup lang="ts">
 import { computed } from 'vue'
 const props = defineProps({ frontmatterMerge: { type: Object } })
-const frontmatter = computed(() => ({ ...{}, ...props.frontmatterMerge }))
+const _frontmatter = {}
+const frontmatter = computed(() => {
+  if (props.frontmatterReplace && typeof props.frontmatterReplace === 'object') {
+    const replaceKeys = Object.keys(props.frontmatterReplace)
+    return Object.entries(_frontmatter).reduce((acc, [key, value]) => ({ ...acc, [key]: replaceKeys.includes(key) ? value : undefined }), {})
+  }
+
+  return { ..._frontmatter, ...props.frontmatterMerge }
+})
 defineExpose({ frontmatter: frontmatter.value })
 import Foo from './Foo.vue'
 </script>"
@@ -123,7 +187,15 @@ exports[`transform > style 1`] = `
 <script setup>
 import { computed } from 'vue'
 const props = defineProps({ frontmatterMerge: { type: Object } })
-const frontmatter = computed(() => ({ ...{}, ...props.frontmatterMerge }))
+const _frontmatter = {}
+const frontmatter = computed(() => {
+  if (props.frontmatterReplace && typeof props.frontmatterReplace === 'object') {
+    const replaceKeys = Object.keys(props.frontmatterReplace)
+    return Object.entries(_frontmatter).reduce((acc, [key, value]) => ({ ...acc, [key]: replaceKeys.includes(key) ? value : undefined }), {})
+  }
+
+  return { ..._frontmatter, ...props.frontmatterMerge }
+})
 defineExpose({ frontmatter: frontmatter.value })
 </script>
 <style>h1 { color: red }</style>"
@@ -136,7 +208,15 @@ exports[`transform > vue directives 1`] = `
 <script setup lang="ts">
 import { computed } from 'vue'
 const props = defineProps({ frontmatterMerge: { type: Object } })
-const frontmatter = computed(() => ({ ...{"name":"My Cool App"}, ...props.frontmatterMerge }))
+const _frontmatter = {"name":"My Cool App"}
+const frontmatter = computed(() => {
+  if (props.frontmatterReplace && typeof props.frontmatterReplace === 'object') {
+    const replaceKeys = Object.keys(props.frontmatterReplace)
+    return Object.entries(_frontmatter).reduce((acc, [key, value]) => ({ ...acc, [key]: replaceKeys.includes(key) ? value : undefined }), {})
+  }
+
+  return { ..._frontmatter, ...props.frontmatterMerge }
+})
 defineExpose({ frontmatter: frontmatter.value })
 function onClick() {
   // ...

From ae6deeadde970cdeb5bfaa2c653ad8a6b135c378 Mon Sep 17 00:00:00 2001
From: Runyasak Chaengnaimuang <runyasak.c@gmail.com>
Date: Sun, 15 Dec 2024 23:04:59 +0700
Subject: [PATCH 7/7] Update README

---
 README.md | 29 ++++++++++++++++++++++++++---
 1 file changed, 26 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 52114f0..e1467e6 100644
--- a/README.md
+++ b/README.md
@@ -159,6 +159,7 @@ For example:
 ```md
 ---
 name: My Cool App
+description: This is My Cool App
 ---
 
 # Hello World
@@ -170,14 +171,14 @@ Will be rendered as
 
 ```html
 <h1>Hello World</h1>
-<p>This is My Cool App</p>
+<p>{{frontmatter.description}}</p>
 ```
 
-You can override the existing frontmatter values by passing a props value to the component.
+You can override existing frontmatter values by passing the :frontmatter-merge prop to the component.
 
 ```html
 <template>
-  <HelloWorld name="My Awesome App"  />
+  <HelloWorld :frontmatter-merge="{ name: 'My Awesome App' }" />
 </template>
 
 <script>
@@ -191,6 +192,28 @@ export default {
 </script>
 ```
 
+Alternatively, you can replace all frontmatter values using the `:frontmatter-replace` prop. Any remaining frontmatter properties will not render and will be `undefined`.
+
+```html
+<template>
+  <HelloWorld :frontmatter-replace="{ name: 'My Super App' }" />
+</template>
+
+<script>
+import HelloWorld from './README.md'
+
+export default {
+  components: {
+    HelloWorld,
+  },
+}
+</script>
+```
+
+For example, if you use `:frontmatter-replace`, the `description` property will not be shown on the screen.
+
+> Use either `:frontmatter-merge` or `:frontmatter-replace` for a component. If both props are provided, only `:frontmatter-replace` will take effect.
+
 It will also be passed to the wrapper component's props if you have set `wrapperComponent` option.
 
 ## Document head and meta