feat!: migrate to unplugin (#24)

Author: antfu

.npmrc

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

README.md

@@ -1,38 +1,97 @@
-# 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
+- 📚 Use Markdown as Vue components
+- 💚 Use Vue components in Markdown
+- ⚡️ Supports Vite, Webpack, Vue CLI and more, powered by [unplugin](https://github.com/unjs/unplugin).
 
 ## 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
+const { VueLoaderPlugin } = require('vue-loader')
+const Markdown = require('unplugin-vue-markdown/webpack')
+
+module.exports = {
+  /* ... */
+  module: {
+    rules: [
+      // ... other rules
+      {
+        test: /\.(vue|md)$/,
+        loader: 'vue-loader'
+      }
+    ]
+  },
+  plugins: [
+    new VueLoaderPlugin(),
+    Markdown({ /* options */ })
+  ]
+}
+```
+
+<br></details>
+
+<details>
+<summary>Vue CLI</summary><br>
+
+```ts
+// vue.config.js
+const Markdown = require('unplugin-vue-markdown/webpack')
+
+module.exports = {
+  parallel: false, // Disable thread-loader which will cause errors, we are still investigating the root cause
+  chainWebpack: (config) => {
+    config.module
+      .rule('vue')
+      .test(/\.(vue|md)$/) // <-- allows Vue to compile Markdown files
+
+    config
+      .plugin('markdown')
+      .use(Markdown({
+        markdownItUses: [
+          prism,
+        ],
+      }))
+  },
 }
 ```
 
-And import it as a normal Vue component
+Example: [`examples/vue-cli`](./examples/vue-cli/)
+
+<br></details>
 
 ## Import Markdown as Vue components
 
@@ -123,7 +182,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/vite'
 
 export default {
   plugins: [
@@ -164,11 +223,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 +260,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 +286,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 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>