feat: unplugin

Author: antfu

.npmrc

@@ -1,2 +1,3 @@
 ignore-workspace-root-check=true
 strict-peer-dependencies=false
+shamefully-hoist=true

README.md

@@ -1,38 +1,75 @@
-# vite-plugin-vue-markdown
+# unplugin-vue-markdown
 
-[![NPM version](https://img.shields.io/npm/v/vite-plugin-vue-markdown?color=a1b858)](https://www.npmjs.com/package/vite-plugin-vue-markdown)
+[![NPM version](https://img.shields.io/npm/v/unplugin-vue-markdown?color=a1b858)](https://www.npmjs.com/package/unplugin-vue-markdown)
 
-Compile Markdown to Vue component. A lite version of [vite-plugin-md](https://github.com/antfu/vite-plugin-md).
+Compile Markdown to Vue component.
 
 - Use Markdown as Vue components
 - Use Vue components in Markdown
 
 ## Install
 
-Install
-
 ```bash
-npm i vite-plugin-vue-markdown -D # yarn add vite-plugin-vue-markdown -D
+npm i unplugin-vue-markdown
 ```
 
-Add it to `vite.config.js`
+<details>
+<summary>Vite</summary><br>
 
 ```ts
-// vite.config.js
+// vite.config.ts
 import Vue from '@vitejs/plugin-vue'
-import Markdown from 'vite-plugin-vue-markdown'
+import Markdown from 'unplugin-vue-markdown/vite'
 
-export default {
+export default defineConfig({
   plugins: [
     Vue({
-      include: [/\.vue$/, /\.md$/], // <--
+      include: [/\.vue$/, /\.md$/], // <-- allows Vue to compile Markdown files
     }),
-    Markdown()
+    Markdown({ /* options */ }),
   ],
+})
+```
+
+Example: [`examples/vite/`](./examples/vite/)
+
+<br></details>
+
+<details>
+<summary>Webpack</summary><br>
+
+```ts
+// webpack.config.js
+module.exports = {
+  /* ... */
+  plugins: [
+    require('unplugin-vue-markdown/webpack')({ /* options */ })
+  ]
 }
 ```
 
-And import it as a normal Vue component
+<br></details>
+
+<details>
+<summary>Vue CLI</summary><br>
+
+```ts
+// vue.config.js
+module.exports = {
+  configureWebpack: {
+    plugins: [
+      require('unplugin-vue-markdown/webpack')({ /* options */ }),
+    ],
+  },
+  chainWebpack: (config) => {
+    config.module
+      .rule('vue')
+      .test(/\.(vue|md)$/) // <-- allows Vue to compile Markdown files
+  },
+}
+```
+
+<br></details>
 
 ## Import Markdown as Vue components
 
@@ -123,7 +160,7 @@ npm i @unhead/vue
 ```js
 // vite.config.js
 import Vue from '@vitejs/plugin-vue'
-import Markdown from 'vite-plugin-vue-markdown'
+import Markdown from 'unplugin-vue-markdown'
 
 export default {
   plugins: [
@@ -164,11 +201,11 @@ For more options available, please refer to [`@unhead/vue`'s docs](https://unhea
 
 ## Options
 
-`vite-plugin-vue-markdown` uses [`markdown-it`](https://github.com/markdown-it/markdown-it) under the hood, see [`markdown-it`'s docs](https://markdown-it.github.io/markdown-it/) for more details
+`unplugin-vue-markdown` uses [`markdown-it`](https://github.com/markdown-it/markdown-it) under the hood, see [`markdown-it`'s docs](https://markdown-it.github.io/markdown-it/) for more details
 
 ```ts
 // vite.config.js
-import Markdown from 'vite-plugin-vue-markdown'
+import Markdown from 'unplugin-vue-markdown/vite'
 import MarkdownItAnchor from 'markdown-it-anchor'
 import MarkdownItPrism from 'markdown-it-prism'
 
@@ -201,19 +238,23 @@ See [the tsdoc](./src/types.ts) for more advanced options
 
 See the [/example](./example).
 
-Or the pre-configured starter template [Vitesse](https://github.com/antfu/vitesse).
+Or the pre-configured Markdown template [Vitesse](https://github.com/antfu/vitesse).
 
 ## Integrations
 
-### Work with [vite-plugin-voie](https://github.com/vamplate/vite-plugin-voie)
+### Work with [vite-plugin-pages](https://github.com/hannoeru/vite-plugin-pages)
 
 ```ts
-import Markdown from 'vite-plugin-vue-markdown'
-import Voie from 'vite-plugin-voie'
+import Vue from '@vitejs/plugin-vue'
+import Markdown from 'unplugin-vue-markdown/vite'
+import Pages from 'vite-plugin-pages'
 
 export default {
   plugins: [
-    Voie({
+    Vue({
+      include: [/\.vue$/, /\.md$/],
+    }),
+    Pages({
       extensions: ['vue', 'md'],
     }),
     Markdown()
@@ -223,20 +264,23 @@ export default {
 
 Put your markdown under `./src/pages/xx.md`, then you can access the page via route `/xx`.
 
+### Work with [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components)
 
-### Work with [vite-plugin-components](https://github.com/antfu/vite-plugin-components)
-
-`vite-plugin-components` allows you to do on-demand components auto importing without worrying about registration.
+`vite-plugin-components` allows you to do on-demand components auto-importing without worrying about registration.
 
 ```ts
-import Markdown from 'vite-plugin-vue-markdown'
-import ViteComponents from 'vite-plugin-components'
+import Vue from '@vitejs/plugin-vue'
+import Markdown from 'unplugin-vue-markdown/vite'
+import Components from 'unplugin-vue-components/vite'
 
 export default {
   plugins: [
+    Vue({
+      include: [/\.vue$/, /\.md$/],
+    }),
     Markdown(),
     // should be placed after `Markdown()`
-    ViteComponents({
+    Components({
       // allow auto load markdown components under `./src/components/`
       extensions: ['vue', 'md'],
 

example/App.vue renamed to examples/vite/App.vue

@@ -1,6 +1,6 @@
 <script setup lang='ts'>
 import { ref } from 'vue'
-import ComponentA from '../README.md'
+import ComponentA from './README.md'
 
 const current = ref()
 </script>