https://github.com/f3ve/vue-markdown-it
Vue 3 plugin and component for markdown-it
https://github.com/f3ve/vue-markdown-it
component markdown markdown-it vue vue3
Last synced: about 1 month ago
JSON representation
Vue 3 plugin and component for markdown-it
- Host: GitHub
- URL: https://github.com/f3ve/vue-markdown-it
- Owner: f3ve
- License: mit
- Created: 2023-09-01T21:28:20.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-10-26T19:12:36.000Z (over 1 year ago)
- Last Synced: 2025-11-22T20:12:26.369Z (3 months ago)
- Topics: component, markdown, markdown-it, vue, vue3
- Language: Vue
- Homepage: https://freedomevenden.com/projects/vue-markdown-it
- Size: 215 KB
- Stars: 36
- Watchers: 1
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vue - @f3ve/vue-markdown-it - A markdown-it component for Vue3. Easy to use and fully typed. (Components & Libraries / UI Components)
- fucking-awesome-vue - @f3ve/vue-markdown-it - A markdown-it component for Vue3. Easy to use and fully typed. (Components & Libraries / UI Components)
- awesome-vue - @f3ve/vue-markdown-it - A markdown-it component for Vue3. Easy to use and fully typed. (Components & Libraries / UI Components)
README
[![Contributors][contributors-shield]][contributors-url]
[![Forks][forks-shield]][forks-url]
[![Stargazers][stars-shield]][stars-url]
[![Issues][issues-shield]][issues-url]
[![MIT License][license-shield]][license-url]
Table of Contents
## About The Project
This is a component for easily integrating [markdown-it](https://github.com/markdown-it/markdown-it) in [Vue 3](https://vuejs.org/). This project was inspired by [markdown-it-vue](https://github.com/ravenq/markdown-it-vue). which hasn't been updated in a while and only supports Vue 2.
### Built With
- [![Vue][Vue.js]][Vue-url]
- [![Vite][Vite.js]][Vite-url]
## Getting Started
### Prerequisites
- Vue 3
```bash
npm i vue
```
### Installation
```
npm i @f3ve/vue-markdown-it
```
## Usage
### Importing the Component
You can directly import the component in your SFC file.
#### In [``](https://vuejs.org/api/sfc-script-setup.html#basic-syntax) Syntax
```vue
<!-- Vue 3 setup script syntax -->
<script setup>
import { VueMarkdownIt } from '@f3ve/vue-markdown-it';
const post = ref();
onMounted(async () => {
const res = await api.get('/post');
post.value = res.data;
});
```
#### In Regular `` Syntax
```vue
<script>
import { VueMarkdownIt } from '@f3ve/vue-markdown-it';
export default {
components: {
VueMarkdownIt
}
setup() {
const post = ref();
onMounted(async () => {
const res = await api.get('/post');
post.value = res.data;
});
}
}
```
### Using the Plugin
You can also use the plugin to register the component globally.
```js
// main.js
import { createApp } from 'vue';
import App from './App.vue';
import { VueMarkdownItPlugin } from '@f3ve/vue-markdown-it';
const app = createApp(App);
app.use(VueMarkdownItPlugin);
app.mount('#app');
```
### Using markdown-it Plugins
You can add markdown-it plugins using the `plugin` prop. `plugin` expects an array of markdown-it plugins. If you want to configure the options of a plugin you can nest the plugin and its options in an array.
```vue
import { VueMarkdownIt } from '@f3ve/vue-markdown-it';
import myPlugin from 'myPlugin';
import myPluginWithOption from 'myPluginWithOptions';
const post = ref();
onMounted(async () => {
const res = await api.get('/post');
post.value = res.data;
});
```
### Using Markdown-it Options & Presets
See [Markdown-it docs](https://markdown-it.github.io/markdown-it/#MarkdownIt.new) for more information
#### Options
> _Note: I'm using Vue [script setup](https://vuejs.org/api/sfc-script-setup.html#basic-syntax) syntax in these examples. If you're not using script setup make sure to [register the component](https://vuejs.org/guide/components/registration.html#local-registration) before using._
```vue
import { VueMarkdownIt } from '@f3ve/vue-markdown-it';
const post = ref();
const options = {
html: true,
linkify: true,
};
onMounted(async () => {
const res = await api.get('/post');
post.value = res.data;
});
```
#### Presets
```vue
import { VueMarkdownIt } from '@f3ve/vue-markdown-it';
const post = ref();
onMounted(async () => {
const res = await api.get('/post');
post.value = res.data;
});
```
#### Using Presets and Options together
```vue
import { VueMarkdownIt } from '@f3ve/vue-markdown-it';
const post = ref();
const options = {
html: true,
linkify: true,
};
onMounted(async () => {
const res = await api.get('/post');
post.value = res.data;
});
```
## Roadmap
See the [open issues](https://github.com/f3ve/vue-markdown-it/issues) for a full list of proposed features (and known issues).
## Contributing
[See contributing guide](https://github.com/f3ve/.github/blob/main/CONTRIBUTING.md)
## License
Distributed under the [MIT License](https://github.com/f3ve/vue-markdown-it/blob/main/LICENSE).
[contributors-shield]: https://img.shields.io/github/contributors/f3ve/vue-markdown-it.svg?style=for-the-badge
[contributors-url]: https://github.com/f3ve/vue-markdown-it/graphs/contributors
[forks-shield]: https://img.shields.io/github/forks/f3ve/vue-markdown-it.svg?style=for-the-badge
[forks-url]: https://github.com/f3ve/vue-markdown-it/network/members
[stars-shield]: https://img.shields.io/github/stars/f3ve/vue-markdown-it.svg?style=for-the-badge
[stars-url]: https://github.com/f3ve/vue-markdown-it/stargazers
[issues-shield]: https://img.shields.io/github/issues/f3ve/vue-markdown-it.svg?style=for-the-badge
[issues-url]: https://github.com/f3ve/vue-markdown-it/issues
[license-shield]: https://img.shields.io/github/license/f3ve/vue-markdown-it.svg?style=for-the-badge
[license-url]: https://github.com/f3ve/vue-markdown-it/blob/master/LICENSE.txt
[linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge&logo=linkedin&colorB=555
[linkedin-url]: https://linkedin.com/in/linkedin_username
[product-screenshot]: images/screenshot.png
[Next.js]: https://img.shields.io/badge/next.js-000000?style=for-the-badge&logo=nextdotjs&logoColor=white
[Next-url]: https://nextjs.org/
[React.js]: https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB
[React-url]: https://reactjs.org/
[Vue.js]: https://img.shields.io/badge/Vue.js-35495E?style=for-the-badge&logo=vuedotjs&logoColor=4FC08D
[Vue-url]: https://vuejs.org/
[Vite.js]: https://img.shields.io/badge/VITE-35495E?style=for-the-badge&logo=vite
[Vite-url]: https://vitejs.dev