How to convert markdown img to vue component in Vue3?

Question

When converting markdown string to HTML content, img will be convert to an actual <img> tag.

What I want is allow user to click on that image, then pop out a modal, where user can visit a bigger size of iamge.

If <img> tag can be replaced by a custom Vue component, then everything will be simpler. But how can I do that?

Answer 1

VuePress 2 and VitePress both allow you to use Vue 3 components directly in Markdown files.

Example markdown with Vue SFC:

[Home](../README.md)
[About](../about/README.md)

_Hello world_

<img @click="showModal = true" :src="imgUrl">
<MyModal v-if="showModal" />

<script>
import { ref } from 'vue'
import MyModal from '@/components/MyModal.vue'

export default {
  components: {
    MyModal
  },
  setup() {
    return {
      showModal: ref(false),
      imgUrl: 'path/to/image'
    }
  }
}
</script>