unplugin

Experimental

Unified plugin system for build tools.

Current supports:

• Vite
• Rollup
• Webpack

Hooks

unplugin extends the excellent Rollup plugin API as the unified plugin interface and provides a compatible layer base on the build tools using.

Support State

Hook	Rollup	Vite	Webpack
transformInclude	✅	✅	✅
transform	✅	✅	✅
enforce	❌*	✅	✅
resolveId	✅	✅	🚧 Expiremental
load	✅	✅	🚧 Expiremental

• *: Rollup does not support enforce to control the order of plugins. Users will need to maintain the order manually.

Starter Template

• unplugin-starter

Usage

import { createUnplugin } from 'unplugin'

export const unplugin = createUnplugin((options: UserOptions) => {
  return {
    name: 'my-first-unplugin',
    // webpack's id filter is outside of loader logic,
    // an additional hook is needed for better perf on webpack
    transformInclude (id) {
      return id.endsWith('.vue')
    },
    // just like rollup transform
    transform (code) {
      return code.replace(/<template>/, `<template><div>Injected</div>`)
    },
    // more hooks incoming
  }
})

export const vitePlugin = plugin.vite
export const rollupPlugin = plugin.rollup
export const webpackPlugin = plugin.webpack
export const nuxtModule = plugin.nuxt

Vite

// vite.config.ts
import MyUnplugin from './my-unplugin'

export default {
  plugins: [
    MyUnplugin.vite({ /* options */ })
  ]
}

Rollup

// rollup.config.js
import MyUnplugin from './my-unplugin'

export default {
  plugins: [
    MyUnplugin.rollup({ /* options */ })
  ]
}

Webpack

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

Nuxt

Expose the Nuxt module in a submodule

// ./nuxt.js
import MyUnplugin from './my-unplugin'

export default MyUnplugin.nuxt

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

Examples

• unplugin-auto-import
• unplugin-vue2-script-setup

License

MIT License © 2021 Nuxt Contrib