Accessing frontmatter from outside

[angelokezimana]

I'm currently working on a Vue 3 project and using the unplugin-vue-markdown package to render markdown content. I have frontmatter metadata in my markdown files that I need to access in my Vue component.

Code Snippets: markdown:

---
title: My Markdown Title
otherData: Some Value
---
## Content
This is my markdown content.

Vue Component:

<template>
  <div>
    <h1>{{ frontmatter.title }}</h1>
    <!-- ...other content -->
  </div>
</template>

I've reviewed the documentation of unplugin-vue-markdown but haven't found a solution that addresses accessing frontmatter from outside the markdown file.

Packages and Versions:

Vue: 3.3.4 unplugin-vue-markdown: 0.24.2

[antfu]

I think this would work

import { frontmatter } from './foo.vue'

[angelokezimana]

Thank you @antfu , however, my question was how to extract/get frontmatter from .md file to vue component.

I tried

foo.md

---
title: My Markdown Title
otherData: Some Value
---
## Content
This is my markdown content.

App.vue

<script setup>
import { frontmatter } from './foo.md';
</script>
<template>
  <div>
    {{ frontmatter.title }}
  </div>
</template>

And I got this error