解决方案

<template>
  <span ref="latex" class="katex" v-html="rawHTML" />
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'Latex',
})
</script>

<script lang="ts" setup>
import katex from 'katex'
import 'katex/dist/katex.css'
import { computed, useSlots } from 'vue'

const rawHTML = computed(() => {
  console.log(useSlots().default?.())
  return katex.renderToString(useSlots().default?.()[0].children, {
    throwOnError: false,
  })
})
</script>

<style scoped></style>

Demo

<latex>\pm\sqrt{a^2 + b^2}</latex>

参考文章

• https://katex.org/docs/api.html
• vue katex_在Vue应用中使用KaTeX的简单指令
• 在Vue脚手架中使用KaTeX渲染公式