https://github.com/logue/vue-markdown-wasm
markdown-wasm for Vue2 & 3
https://github.com/logue/vue-markdown-wasm
markdown markdown-converter markdown-viewer vue vue-component vue2 vue3
Last synced: 12 months ago
JSON representation
markdown-wasm for Vue2 & 3
- Host: GitHub
- URL: https://github.com/logue/vue-markdown-wasm
- Owner: logue
- License: mit
- Created: 2022-12-22T23:47:50.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2025-07-12T05:54:15.000Z (12 months ago)
- Last Synced: 2025-07-12T05:54:36.553Z (12 months ago)
- Topics: markdown, markdown-converter, markdown-viewer, vue, vue-component, vue2, vue3
- Language: Vue
- Homepage: https://logue.dev/vue-markdown-wasm/
- Size: 7.6 MB
- Stars: 5
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# vue-markdown-wasm
[](https://www.jsdelivr.com/package/npm/vue-markdown-wasm)
[](https://www.npmjs.com/package/vue-markdown-wasm)
[](https://uiwjs.github.io/npm-unpkg/#/pkg/vue-markdown-wasm/file/README.md)
[](https://www.npmjs.com/package/vue-markdown-wasm)
[](https://gitpod.io/#https://github.com/logue/vue-markdown-wasm)
[](https://twitter.com/logue256)
Vue2 and 3 component for [markdown-wasm](https://github.com/logue/markdown-wasm/).
## Usage
```vue
import VueMarkdown from 'vue-markdown-wasm';
/** Demo text */
const input = ref(`# The quick brown fox jumps over the lazy dog.
[Lorem ipsum](https://www.lipsum.com/) dolor sit amet, **consectetur** adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`);
```
See [Vue Markdown Wasm Live Preview](https://logue.dev/vue-markdown-wasm/) and [source code](./src-docs/DemoPage.vue).
### CDN Usage
Load markdown-wasm and vue-demi separately. Please change the version accordingly.
```html
const { createApp } = Vue;
app.component(VueMarkdown).mount('#app');
```
## Props
| Props | Type | Default | Information |
| --------------- | --------------------- | ------------------ | --------------------------------------------------------------------------------------------------------------------------- |
| `tag` | `string` | article | Markdown wasm wrapping tag. Default is `article` because it may contain `h1` and `h2` tags. |
| `parse-flags` | `ParseFlags` | ParseFlags.DEFAULT | Flags that customize Markdown parsin |
| `format` | `<'html' \| 'xhtml'>` | xhtml | Select output format |
| `bytes` | `boolean` | false | result as a Uint8Array |
| `allow-js-uri` | `boolean` | false | Allow "javascript:" in links |
| `on-code-block` | `Function` | undefined | Optional callback which if provided is called for each code block. langname holds the "language tag", if any, of the block. |
### ParseFlags
| Flags | Description |
| ----------------------------- | -------------------------------------------------------- |
| `COLLAPSE_WHITESPACE` | In TEXT, collapse non-trivial whitespace into single ' ' |
| `LATEX_MATH_SPANS` | Enable $ and $$ containing LaTeX equations. |
| `NO_HTML_BLOCKS` | Disable raw HTML blocks. |
| `NO_HTML_SPANS` | Disable raw HTML (inline). |
| `NO_INDENTED_CODE_BLOCKS` | Disable indented code blocks. (Only fenced code works.) |
| `PERMISSIVE_ATX_HEADERS` | Do not require space in ATX headers ( ###header ) |
| `PERMISSIVE_EMAIL_AUTO_LINKS` | Recognize e-mails as links even without \<...\> |
| `PERMISSIVE_URL_AUTO_LINKS` | Recognize URLs as links even without <...> |
| `PERMISSIVE_WWW_AUTOLINKS` | Enable WWW autolinks (without proto; just 'www.') |
| `STRIKETHROUGH` | Enable strikethrough extension. |
| `TABLES` | Enable tables extension. |
| `TASK_LISTS` | Enable task list extension. |
| `WIKI_LINKS` | Enable wiki links extension. |
| `UNDERLINE` | Enable underline extension (disables '\_' for emphasis) |
- `DEFAULT` flag is shorthand for `COLLAPSE_WHITESPACE | PERMISSIVE_ATX_HEADERS | PERMISSIVE_URL_AUTO_LINKS | STRIKETHROUGH | TABLES | TASK_LISTS`
- `NO_HTML` flag is shorthand for `NO_HTML_BLOCKS | NO_HTML_SPANS`
## Emits
| Emits | Type | Description |
| --------- | ---------------------- | -------------------------------- |
| `@render` | `string \| Uint8Array` | When markdown to html converted. |
## LICENSE
©2022-2024 by Logue. Licensed under the [MIT License](LICENSE).