### Install TypeScript Types for Markdown-it

Source: https://github.com/cloudacy/vue-markdown-render/blob/master/README.md

This command installs the necessary TypeScript type definitions for the markdown-it library as a development dependency. This is crucial for using markdown-it with TypeScript.

```bash
npm install @types/markdown-it --save-dev
```

--------------------------------

### Configure Markdown-it Options in Vue

Source: https://github.com/cloudacy/vue-markdown-render/blob/master/README.md

This example shows how to pass custom options to the underlying markdown-it instance used by VueMarkdown. Options are passed as a JavaScript object to the 'options' prop.

```vue
<template>
 <vue-markdown :source="src" :options="options" />
</template>
```

--------------------------------

### Configuring markdown-it Options for VueMarkdown

Source: https://context7.com/cloudacy/vue-markdown-render/llms.txt

Illustrates how to customize the Markdown rendering behavior by passing configuration options to the 'options' prop of the VueMarkdown component. This example enables HTML rendering, auto-linking URLs, and typographic replacements.

```vue
<template>
  <vue-markdown :source="source" :options="markdownOptions" />
</template>

<script setup lang="ts">
import VueMarkdown, { Options } from 'vue-markdown-render'
import { ref } from 'vue'

// Enable HTML rendering, linkify URLs, and typographic replacements
const markdownOptions: Options = {
  html: true,        // Allow HTML tags in source
  linkify: true,     // Auto-convert URL-like text to links
  typographer: true, // Enable smartquotes and other typographic replacements
  breaks: true       // Convert \n to <br>
}

const source = ref(`# Dynamic Content

This contains <b>inline HTML</b> which renders because html: true.

Visit https://example.com - this auto-links because linkify: true.

"Smartquotes" become "curly" with typographer: true.
`)
</script>
```

--------------------------------

### Using markdown-it Plugins with VueMarkdown

Source: https://context7.com/cloudacy/vue-markdown-render/llms.txt

Shows how to extend the Markdown rendering capabilities by passing an array of markdown-it plugins to the 'plugins' prop. This example integrates 'markdown-it-anchor' for anchor links and 'markdown-it-toc-done-right' for table of contents generation.

```vue
<template>
  <vue-markdown :source="markdown" :plugins="plugins" />
</template>

<script setup>
import VueMarkdown from 'vue-markdown-render'
import MarkdownItAnchor from 'markdown-it-anchor'
import MarkdownItToc from 'markdown-it-toc-done-right'

// Array of markdown-it compatible plugins
const plugins = [
  MarkdownItAnchor,  // Adds anchor links to headings
  MarkdownItToc      // Generates table of contents
]

const markdown = `
[[toc]]

# Introduction
Some introductory text.

## Getting Started
Instructions for getting started.

## Advanced Usage
More complex examples.
`
</script>
```

--------------------------------

### Integrate Markdown-it Plugins in Vue

Source: https://github.com/cloudacy/vue-markdown-render/blob/master/README.md

This snippet illustrates how to enable markdown-it plugins within the VueMarkdown component. Plugins are provided as an array to the 'plugins' prop. This example uses MarkdownItAnchor.

```vue
<template>
  <vue-markdown :source="markdown" :plugins="plugins" />
</template>

<script setup>
import VueMarkdown from 'vue-markdown-render'
import MarkdownItAnchor from 'markdown-it-anchor';

const plugins = [MarkdownItAnchor];
</script>
```

--------------------------------

### Basic VueMarkdown Component Usage

Source: https://context7.com/cloudacy/vue-markdown-render/llms.txt

Demonstrates the fundamental usage of the VueMarkdown component to render a Markdown string. It shows how to import the component and pass a Markdown string to the 'source' prop. The component reactively updates when the source changes.

```vue
<template>
  <div>
    <vue-markdown :source="markdownContent" />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import VueMarkdown from 'vue-markdown-render'

export default defineComponent({
  name: 'MyComponent',
  components: {
    VueMarkdown
  },
  setup() {
    const markdownContent = ref(`# Hello World

This is a **bold** statement and this is *italic*.

- List item 1
- List item 2
- List item 3

```javascript
const greeting = 'Hello, Markdown!';
console.log(greeting);
```
`)

    return {
      markdownContent
    }
  }
})
</script>
```

--------------------------------

### Reactive Markdown Rendering with VueMarkdown

Source: https://context7.com/cloudacy/vue-markdown-render/llms.txt

Demonstrates the reactive nature of the VueMarkdown component. Changes to the 'source' prop, driven by user input or other reactive data like a counter, automatically update the rendered HTML. This enables features like live previews.

```vue
<template>
  <div>
    <textarea v-model="userInput" placeholder="Type markdown here..." />
    <button @click="counter++">Increment Counter: {{ counter }}</button>

    <vue-markdown
      :source="`# Live Preview\n\nCounter value: **${counter}**\n\n${userInput}`"
      :options="{ html: true }"
    />
  </div>
</template>

<script setup lang="ts">
import VueMarkdown from 'vue-markdown-render'
import { ref } from 'vue'

const userInput = ref('Type some **markdown** here!')
const counter = ref(0)
</script>
```

--------------------------------

### Test VueMarkdown Component Rendering with Vue Test Utils

Source: https://context7.com/cloudacy/vue-markdown-render/llms.txt

Tests the VueMarkdown component to ensure it correctly renders Markdown content into HTML. It mounts the component with a source prop containing Markdown and asserts that the expected HTML tags are present in the output. It also tests the behavior when the 'html' option is disabled, ensuring tags are escaped.

```typescript
import { describe, it, expect } from 'vitest'
import { shallowMount } from '@vue/test-utils'
import VueMarkdown from 'vue-markdown-render'

describe('VueMarkdown', () => {
  it('renders markdown as HTML', () => {
    const source = '# Heading\n\n**Bold text** and *italic*'

    const wrapper = shallowMount(VueMarkdown, {
      props: {
        source,
        options: { html: true }
      }
    })

    expect(wrapper.html()).toContain('<h1>Heading</h1>')
    expect(wrapper.html()).toContain('<strong>Bold text</strong>')
    expect(wrapper.html()).toContain('<em>italic</em>')
  })

  it('escapes HTML when html option is false', () => {
    const wrapper = shallowMount(VueMarkdown, {
      props: {
        source: '<script>alert("xss")</script>',
        options: { html: false }
      }
    })

    // HTML tags should be escaped, not rendered
    expect(wrapper.html()).toContain('&lt;script&gt;')
    expect(wrapper.html()).not.toContain('<script>')
  })
})
```

--------------------------------

### Render Markdown in Vue Component

Source: https://github.com/cloudacy/vue-markdown-render/blob/master/README.md

This snippet demonstrates how to use the VueMarkdown component to render Markdown content within a Vue.js application. It requires importing VueMarkdown and providing the Markdown source via the 'source' prop.

```vue
<template>
  <div>
    <vue-markdown :source="src" />
  </div>
</template>

<script lang="ts">
import VueMarkdown from 'vue-markdown-render'

export default defineComponent({
  name: 'MyComponent',
  components: {
    VueMarkdown
  },
  setup(props, ctx) {
    const src = ref('# header')

    return {
      src
    }
  }
})
</script>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.