unplugin/unplugin-unified

unified pipeline integration with unplugin

unplugin-unified

unified pipeline integration with unplugin, for Vite, Rollup, Webpack, Nuxt, esbuild, and more.

Install

npm i unplugin-unified

Vite

// vite.config.ts
import Unified from 'unplugin-unified/vite'

export default defineConfig({
  plugins: [
    Unified({ /* options */ }),
  ],
})

Example: playground/

Rollup

// rollup.config.js
import Unified from 'unplugin-unified/rollup'

export default {
  plugins: [
    Unified({ /* options */ }),
  ],
}

Webpack

// webpack.config.js
module.exports = {
  /* ... */
  plugins: [
    require('unplugin-unified/webpack')({ /* options */ })
  ]
}

Nuxt

// nuxt.config.js
export default {
  buildModules: [
    ['unplugin-unified/nuxt', { /* options */ }],
  ],
}

This module works for both Nuxt 2 and Nuxt Vite

Vue CLI

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      require('unplugin-unified/webpack')({ /* options */ }),
    ],
  },
}

esbuild

// esbuild.config.js
import { build } from 'esbuild'
import Unified from 'unplugin-unified/esbuild'

build({
  plugins: [
    Unified({ /* options */ })
  ],
})

Configurations

This plugin allows you to configure multiple unified processors based on the file id. You can pass an array of rules to the plugin with different configurations.

import remarkParse from 'remark-parse'
import remarkRehype from 'remark-rehype'
import remarkGfm from 'remark-gfm'
import rehypeRaw from 'rehype-raw'
import rehypeStringify from 'rehype-stringify'
import rehypeShikiji from 'rehype-shikiji'

// configure the plugin
Unified({
  rules: [
    {
      // match for `*.md` files
      include: /\.md$/,
      // setup the unified processor
      setup: unified => unified
        .use(remarkParse)
        .use(remarkGfm)
        .use(remarkRehype, { allowDangerousHtml: true })
        .use(rehypeRaw)
        .use(rehypeShikiji, { themes: { dark: 'vitesse-dark', light: 'vitesse-light' } })
        .use(rehypeStringify),
      // custom transformers
      transform: {
        post(html) {
          // wrap the generated HTML with `export default`
          return `export default (${JSON.stringify(html)})`
        },
      },
    },
    {
      include: /\.vue$/,
      exclude: /node_modules/,
      enforce: 'pre', // run before vue plugins
      // ...
    },
    // ... more rules
  ],
})