You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Nuxt Module to compile markdown files into Vue SFC at **build time**. This enables you to put `.md` files into your `pages` directory as standalone pages, and `.md` under `components` directory as Vue components. With components auto-import built-in in Nuxt, you can also use any components in your markdown files.
8
+
Nuxt Module to compile markdown files into Vue SFC at **build time**. This enables you to put `.md` files into your `pages/` directory as standalone pages, and `.md` under `components/` directory as Vue components. With components auto-import built-in in Nuxt, you can also use any components in your markdown files.
Use the `seo` property in the frontmatter to leverage [`useSeoMeta()`](https://nuxt.com/docs/api/composables/use-seo-meta):
55
+
56
+
```md
57
+
---
58
+
seo:
59
+
title: My title
60
+
description: My description
61
+
ogImage: https://example.com/image.png
62
+
twitterCard: summary_large_image
63
+
---
64
+
65
+
# My page
66
+
```
67
+
68
+
Will be transformed to:
69
+
70
+
```vue
71
+
<script setup>
72
+
useSeoMeta({
73
+
title: 'My title',
74
+
description: 'My description',
75
+
ogImage: 'https://example.com/image.png',
76
+
twitterCard: 'summary_large_image'
77
+
})
78
+
</script>
79
+
80
+
<-- template --->
81
+
```
82
+
83
+
**Note:** Use `title` and `description` as shortcut for `seo.title` and `seo.description`
84
+
85
+
Use the `meta` property in the frontmatter to leverage [`definePageMeta()`](https://nuxt.com/docs/api/utils/define-page-meta#definepagemeta) for the `pages/` directory:
86
+
87
+
```md
88
+
---
89
+
meta:
90
+
layout: dark
91
+
middleware: log
92
+
---
93
+
94
+
# My page
95
+
```
96
+
97
+
Will be transformed to:
98
+
99
+
```vue
100
+
<script setup>
101
+
definePageMeta({
102
+
layout: 'dark',
103
+
middleware: 'log'
104
+
})
105
+
</script>
106
+
107
+
<-- template --->
108
+
```
109
+
110
+
## Frontmatter
111
+
112
+
The frontmatter is parsed and injected into Vue's instance data frontmatter field.
113
+
114
+
```md
115
+
---
116
+
name: My Page
117
+
---
118
+
119
+
# Hello World
120
+
121
+
This is {{ frontmatter.name }}
122
+
```
123
+
124
+
## Import Markdown as Vue components
125
+
126
+
With Nuxt auto-import, all Markdown files inside the `components/` directory will be imported when used:
127
+
128
+
```
129
+
components/
130
+
HelloWorld.md
131
+
pages/
132
+
index.md
133
+
```
134
+
135
+
Then in your `pages/index.md`:
136
+
137
+
```md
138
+
I can use a Markdown component:
139
+
140
+
<HelloWorld />
141
+
```
142
+
143
+
If the Markdown is not inside the `components/` directory, you can import it and use it as a normal Vue component:
144
+
145
+
```vue
146
+
<script setup>
147
+
import Readme from '../README.md'
148
+
</script>
149
+
150
+
<template>
151
+
<Readme />
152
+
</template>
153
+
```
154
+
36
155
## FAQ
37
156
38
157
### How does this compare to [@nuxt/content](https://content.nuxtjs.org/)?
39
158
40
-
159
+
`nuxt-compile-markdown` works at built time and converts the Markdown files to Vue files for maximum performance. This module does not have the ability to query content like [Nuxt Content Query Builder](https://content.nuxtjs.org/guide/displaying/querying). Also `nuxt-compile-markdown` does not support the MDC syntax (for now).
0 commit comments