如何在Vue3中正确渲染Markdown字段？（Laravel8+Nova3环境）

First off, the issue here is that Vue doesn’t automatically parse and render Markdown—it just outputs the raw text. To fix this, we need to add a Markdown parser to your Vue app and use it to convert the raw string into HTML that Vue can render. Here’s a step-by-step solution:

1. Install a Markdown Parser #

We’ll use marked, a lightweight and widely-used Markdown parser. Install it via npm or yarn:

npm install marked
# or
yarn add marked

2. Create a Reusable Markdown Renderer Component #

It’s best to make a reusable component so you can render Markdown anywhere in your app. Create a file like components/MarkdownRenderer.vue with this code:

<template>
  <div class="markdown-content" v-html="renderedContent"></div>
</template>

<script setup>
import { computed } from 'vue';
import marked from 'marked';

// Define props to accept the raw Markdown content
const props = defineProps({
  content: {
    type: String,
    required: true,
    default: ''
  }
});

// Compute the rendered HTML from the Markdown string
const renderedContent = computed(() => {
  // You can customize marked's options here if needed (e.g., enable tables, line breaks)
  return marked(props.content);
});
</script>

<style scoped>
/* Optional: Add basic styling to make your Markdown look polished */
.markdown-content h1, h2, h3 {
  margin: 1rem 0;
  font-weight: 600;
}
.markdown-content p {
  margin-bottom: 1rem;
  line-height: 1.6;
}
.markdown-content ul, ol {
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}
.markdown-content code {
  background: #f4f4f4;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  font-family: monospace;
}
.markdown-content pre {
  background: #f4f4f4;
  padding: 1rem;
  border-radius: 4px;
  overflow-x: auto;
}
</style>

3. Use the Component in Your Template #

Now, replace your plain text output with the new component. First, import it in your parent component:

<script setup>
import MarkdownRenderer from './components/MarkdownRenderer.vue';
// ... rest of your existing code (axios call, reactive state)
</script>

Then swap out <p>{{ state.content }}</p> with:

<MarkdownRenderer :content="state.content" />

Important Security Note #

Since we’re using v-html to render parsed HTML, make sure the Markdown content comes from a trusted source (like your Nova admin panel). If you ever allow untrusted users to submit Markdown, add an HTML sanitizer like dompurify to prevent XSS attacks:

npm install dompurify

Update the computed property to include sanitization:

import DOMPurify from 'dompurify';

const renderedContent = computed(() => {
  const html = marked(props.content);
  return DOMPurify.sanitize(html);
});

That’s it! Your Markdown content should now render properly with all formatting (headings, lists, code blocks, etc.) intact.

内容的提问来源于stack exchange，提问作者Artur Müller Romanov