Using Components in Markdown with Astro

Astro makes it possible to write components using any frontend framework and then use those components inside Markdown pages. Let’s try it.

Astro component

First, let’s create an Astro component:

---
const { message } = Astro.props;
---

<div>{message}</div>

<style>
  div {
    border: 1px solid #999;
    padding: 8px;
  }
</style>

Now we can use that component inside a Markdown page via setup syntax:

---
setup: |
  import Banner from '../component/banner.astro';
---

<Banner message="Some text" />

Frontend framework component

We can also use a frontend framework to write components. Here’s an example using Vue:

<template>
  <div>{{ message }}</div>
</template>

<script setup lang="ts">
  defineProps({
    message: {
      type: String,
      required: true,
    },
  });
</script>

<style scoped>
  div {
    border: 1px solid #999;
    padding: 8px;
  }
</style>

We can use this component the same way as we did for an Astro component:

---
setup: |
  import Banner from '../component/Banner.vue';
---

<Banner message="Some text" />

List/object component prop

Let’s say you have a component that takes a list of elements:

---
const { items } = Astro.props;
---

<div class="list">
  {items.map((item) => <div class="item">{item}</div>)}
</div>

It might be tricky to pass an array to a component inside a Markdown page. You can use the frontmatter to store it:

---
setup: |
  import List from '../component/list.astro';
list: ['Item 1', 'Item 2']
---

<List items={frontmatter.list} />