Integrations.md

Integrations

Put your markdown under ./src/pages/xx.md, then you can access the page via route /xx.

Work with vite-plugin-pages

import Markdown from 'vite-plugin-md'
import Pages from 'vite-plugin-pages'

export default {
  plugins: [
    Pages({
      extensions: ['vue', 'md'],
    }),
    Markdown(),
  ],
}

Put your markdown under ./src/pages/xx.md, then you can access the page via route /xx.

Note: though no longer maintained, vite-plugin-voie can also be integrated with this plugin in precisely the same way as discussed above

Work with vite-plugin-components

vite-plugin-components allows you to do on-demand components auto importing without worrying about registration.

import Markdown from 'vite-plugin-md'
import Components from 'unplugin-vue-components/vite'

export default {
  plugins: [
    Markdown(),
    // should be placed after `Markdown()`
    Components({
      // allow auto load markdown components under `./src/components/`
      extensions: ['vue', 'md'],

      // allow auto import and register components used in markdown
      include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
    }),
  ],
}

Components under ./src/components can be directly used in markdown components, and markdown components can also be put under ./src/components to be auto imported.

Work with vite-plugin-vue-layouts

vite-plugin-vue-layouts plugin provides a nice complement to the vite-plugin-pages by providing a wrapper component (aka, a "layout") around components -- which includes Markdown files -- when integrated with pages.

To use this integration with this plugin, nothing is really needed from a configuration standpoint ... it should generally just work ... but this plugin does provide "route meta" configuration that may be of interest (see meta builder for more info).