esbuild-plugin-vue-jsx

0.1.0 verified Fri May 01 auth: no javascript

esbuild plugin providing Vue 3 JSX support via @vue/babel-plugin-jsx. Current version 0.1.0, active development. It integrates Vue's JSX compiler into esbuild's build pipeline for fast bundling. Differentiated from @vitejs/plugin-vue-jsx by being esbuild-native and not requiring Vite. Ships TypeScript types. Limited adoption; alternatives exist.

Common errors

error Error: Cannot find module '@vue/babel-plugin-jsx' ↓

cause Missing dependency @vue/babel-plugin-jsx.

fix

npm install @vue/babel-plugin-jsx --save-dev

error TypeError: vueJsx is not a function ↓

cause Improper import: named import instead of default.

fix

Use default import: import vueJsx from 'esbuild-plugin-vue-jsx'

Warnings

gotcha The plugin requires @vue/babel-plugin-jsx to be installed separately; it is a direct dependency but not automatically included. ↓

fix Ensure @vue/babel-plugin-jsx is in your package.json.

deprecated Version 0.1.0 is early; API may change without major version bump. ↓

fix Pin exact version or monitor releases closely.

gotcha The plugin only supports Vue 3 JSX syntax; Vue 2 projects require a different solution. ↓

fix Use Vue 2 specific plugins if targeting Vue 2.

Install

npm install esbuild-plugin-vue-jsx

yarn add esbuild-plugin-vue-jsx

pnpm add esbuild-plugin-vue-jsx

Imports

default

wrong

import { vueJsx } from 'esbuild-plugin-vue-jsx'

correct

import vueJsx from 'esbuild-plugin-vue-jsx'

Default export only; named import will fail.

vueJsx (default import)

wrong

const { vueJsx } = require('esbuild-plugin-vue-jsx')

correct

const vueJsx = require('esbuild-plugin-vue-jsx')

In CommonJS, destructuring from default export is incorrect.

TypeScript usage

wrong

import VueJsxOptions from 'esbuild-plugin-vue-jsx'

correct

import type VueJsxOptions from 'esbuild-plugin-vue-jsx'

Use type import to avoid runtime side effects.

Quickstart

Builds a Vue 3 JSX entry point with esbuild using the plugin, showing how to pass options to the underlying Babel JSX plugin.

import { build } from 'esbuild';
import vueJsx from 'esbuild-plugin-vue-jsx';

await build({
  entryPoints: ['src/app.tsx'],
  bundle: true,
  outfile: 'dist/app.js',
  plugins: [
    vueJsx({
      // Pass options to @vue/babel-plugin-jsx
      mergeProps: false,
      enableObjectSlots: false,
    }),
  ],
});