vue.js - Implement a custom ProseScript component in Nuxt Content - Stack Overflow

admin管理员组

文章数量:1318989

In Nuxt Content, how can a custom <ProseScript/> component be implemented? MDC allows Vue components to be used inside Markdown but sometimes it would be super nice to just write a small component inline without putting it into the /components/content folder.

VitePress allows for this syntax in Markdown:

---
hello: world
---

<script setup>
import { ref } from 'vue'

const count = ref(0)
</script>

## Markdown content

the count is: {{ count }}

In Nuxt Content, the source code for <ProseScript/> is the following and it ouputs some text in the html. I thought of using a <script> tag inside the <template> tags and that gives an error: Tags with side effect (<script> and <style>) are ignored in client component templates.

<template>
  <div v-if="isDev">
    Rendering the <code>script</code> element is dangerous and is disabled by default. Consider implementing your own <code>ProseScript</code> element to have control over script rendering.
  </div>
</template>

<script setup lang="ts">
defineProps({
  src: {
    type: String,
    default: ''
  }
})
const isDev = import.meta.dev
</script>

本文标签： vuejsImplement a custom ProseScript component in Nuxt ContentStack Overflow