---
title: "Smart Quotes and Dashes in Vue Markdown"
description: "Example showing how to use Comark with the punctuation plugin for smart quotes, dashes, and symbols in Vue and Vite."
canonical_url: "https://comark.dev/examples/plugins/vue-vite-punctuation"
---
# Smart Quotes and Dashes in Vue Markdown

> Example showing how to use Comark with the punctuation plugin for smart quotes, dashes, and symbols in Vue and Vite.

::code-explorer
```yaml [props]
org: comarkdown
repo: comark@c78885ca7504b38afc7ced59aac1a3c6b3cc5425
path: examples/3.plugins/vue-vite-punctuation
defaultValue: src/App.vue
```
::

## Features

This example demonstrates the punctuation plugin in Vue:

- **Smart quotes**: `"text"` → “text”, `'text'` → ‘text’
- **Dashes**: `--` → – (en-dash), `---` → — (em-dash)
- **Ellipsis**: `...` → …
- **Symbols**: `(c)` → ©, `(r)` → ®, `(tm)` → ™, `+-` → ±

## Usage

```vue
<script setup lang="ts">
import { Markdown } from '@comark/vue'
import punctuation from '@comark/vue/plugins/punctuation'
</script>

<template>
  <Suspense>
    <Markdown :plugins="[punctuation()]">{{ markdown }}</Markdown>
  </Suspense>
</template>
```

## Learn more

- [Punctuation Plugin Documentation](https://comark.dev/plugins/built-in/punctuation)
- [Comark Documentation](https://comark.dev)


## Sitemap

See the full [sitemap](https://comark.dev/sitemap.md) for all pages.