1 | # Markitdown
|
2 |
|
3 | Using [markdownit-loader](https://github.com/BlueOakJS/markdownit-loader) and [markdown-it](https://github.com/markdown-it/markdown-it)
|
4 |
|
5 | ## Setup
|
6 |
|
7 | - Add `@nuxtjs/markdownit` dependency using yarn or npm to your project
|
8 | - Add `@nuxtjs/markdownit` module to `nuxt.config.js`:
|
9 |
|
10 | ```js
|
11 | modules: [
|
12 | '@nuxtjs/markdownit'
|
13 | ]
|
14 | ```
|
15 |
|
16 | ## Usage
|
17 |
|
18 | ### Using `.vue` files
|
19 |
|
20 | `hello.vue`:
|
21 | ```html
|
22 | <template lang="md">
|
23 | # Hello World!
|
24 | </template>
|
25 | ```
|
26 |
|
27 | ### Using `.md` files
|
28 |
|
29 | `hello.md`:
|
30 | ```md
|
31 | # Hello World!!
|
32 | ```
|
33 |
|
34 | `hello.vue`:
|
35 | ```html
|
36 | <template>
|
37 | <div v-html="hello"></div>
|
38 | </template>
|
39 |
|
40 | <script>
|
41 | import hello from '../hello.md'
|
42 |
|
43 | export default {
|
44 | computed: {
|
45 | hello() {
|
46 | return hello
|
47 | }
|
48 | }
|
49 | }
|
50 | </script>
|
51 | ```
|