4
4
5
5
Compile Markdown to Vue component.
6
6
7
- - 📚 Use Markdown as Vue components
8
- - 💚 Use Vue components in Markdown
9
- - ⚡️ Supports Vite, Webpack, Vue CLI and more, powered by [ unplugin] ( https://github.com/unjs/unplugin ) .
7
+ - 📚 Use Markdown as Vue components.
8
+ - 💚 Use Vue components in Markdown.
9
+ - 🔌 Supports Vite, Webpack, Vue CLI and more, powered by [ unplugin] ( https://github.com/unjs/unplugin ) .
10
+ - ⚡️ The same transformation as [ VitePress] ( https://vitepress.vuejs.org/ ) .
10
11
11
12
## Install
12
13
@@ -34,15 +35,16 @@ export default defineConfig({
34
35
35
36
Example: [ ` examples/vite ` ] ( ./examples/vite/ )
36
37
37
- <br ></details >
38
+ <br >
39
+ </details >
38
40
39
41
<details >
40
42
<summary >Webpack</summary ><br >
41
43
42
44
``` ts
43
45
// webpack.config.js
44
- const { VueLoaderPlugin } = require (' vue-loader' )
45
46
const Markdown = require (' unplugin-vue-markdown/webpack' )
47
+ const { VueLoaderPlugin } = require (' vue-loader' )
46
48
47
49
module .exports = {
48
50
/* ... */
@@ -62,7 +64,8 @@ module.exports = {
62
64
}
63
65
```
64
66
65
- <br ></details >
67
+ <br >
68
+ </details >
66
69
67
70
<details >
68
71
<summary >Vue CLI</summary ><br >
@@ -91,7 +94,8 @@ module.exports = {
91
94
92
95
Example: [ ` examples/vue-cli ` ] ( ./examples/vue-cli/ )
93
96
94
- <br ></details >
97
+ <br >
98
+ </details >
95
99
96
100
## Import Markdown as Vue components
97
101
@@ -144,7 +148,7 @@ import { Counter } from './Counter.vue'
144
148
<Counter :init =' 5' />
145
149
```
146
150
147
- Or you can use [ ` vite-plugin -components` ] ( #work-with-vite-plugin -components ) for auto components registration.
151
+ Or you can use [ ` unplugin-vue -components` ] ( #work-with-unplugin-vue -components ) for auto components registration.
148
152
149
153
## Frontmatter
150
154
@@ -198,12 +202,9 @@ export default {
198
202
199
203
``` js
200
204
// src/main.js
205
+ import { createHead } from ' @unhead/vue' // <--
201
206
import { createApp } from ' vue'
202
207
203
- import { createHead } from ' @unhead/vue'
204
-
205
- // <--
206
-
207
208
const app = createApp (App)
208
209
209
210
const head = createHead () // <--
@@ -229,9 +230,9 @@ For more options available, please refer to [`@unhead/vue`'s docs](https://unhea
229
230
230
231
``` ts
231
232
// vite.config.js
232
- import Markdown from ' unplugin-vue-markdown/vite'
233
233
import MarkdownItAnchor from ' markdown-it-anchor'
234
234
import MarkdownItPrism from ' markdown-it-prism'
235
+ import Markdown from ' unplugin-vue-markdown/vite'
235
236
236
237
export default {
237
238
plugins: [
@@ -260,7 +261,7 @@ See [the tsdoc](./src/types.ts) for more advanced options
260
261
261
262
## Example
262
263
263
- See the [ /example ] ( ./example ) .
264
+ See the [ /examples ] ( ./examples ) .
264
265
265
266
Or the pre-configured Markdown template [ Vitesse] ( https://github.com/antfu/vitesse ) .
266
267
@@ -290,12 +291,12 @@ Put your markdown under `./src/pages/xx.md`, then you can access the page via ro
290
291
291
292
### Work with [ unplugin-vue-components] ( https://github.com/antfu/unplugin-vue-components )
292
293
293
- ` vite-plugin -components` allows you to do on-demand components auto-importing without worrying about registration.
294
+ ` unplugin-vue -components` allows you to do on-demand components auto-importing without worrying about registration.
294
295
295
296
``` ts
296
297
import Vue from ' @vitejs/plugin-vue'
297
- import Markdown from ' unplugin-vue-markdown/vite'
298
298
import Components from ' unplugin-vue-components/vite'
299
+ import Markdown from ' unplugin-vue-markdown/vite'
299
300
300
301
export default {
301
302
plugins: [
@@ -309,7 +310,7 @@ export default {
309
310
extensions: [' vue' , ' md' ],
310
311
311
312
// allow auto import and register components used in markdown
312
- customLoaderMatcher : path => path . endsWith ( ' .md ' ) ,
313
+ include: [ / \. vue $ / , / \. vue \? vue / , / \. md $ / ] ,
313
314
})
314
315
],
315
316
}
0 commit comments