esbuild-plugin-vue-iii

0.5.0 verified Fri May 01 auth: no javascript

A plugin for esbuild that compiles Vue 3 Single-File Components (.vue files) including `<script setup>`. Version 0.5.0, updated irregularly. It leverages internal modules from `@vitejs/plugin-vue` with an interface adapted for esbuild. Unlike Vite's plugin, it does not require Rollup or Vite, making it suitable for projects that want a lighter build pipeline. However, it lacks support for pre-processors, CSS Modules, custom blocks, SFC src imports, and source maps. TypeScript definitions are included.

Common errors

error Error: Build failed with 1 error: error: Unexpected end of file in style block ↓

cause Pre-processor or unclosed style tag in .vue file.

fix

Ensure <style> contains plain CSS or remove pre-processor usage.

error Cannot find module 'esbuild-plugin-vue-iii' ↓

cause Package not installed.

fix

Run 'npm install -D esbuild-plugin-vue-iii'

error Error: No matching export in 'esbuild-plugin-vue-iii' for import 'default' ↓

cause Using ESM import without default export (if not available) or wrong import syntax.

fix

Use named import: import { vue3Plugin } from 'esbuild-plugin-vue-iii'

Warnings

gotcha No support for pre-processors (SCSS, Less, etc.) inside <style> ↓

fix Use separate build step or inline precompiled CSS.

gotcha CSS Modules not supported. All styles are global. ↓

fix Use a different plugin or extract styles manually.

gotcha Source maps are not generated for .vue files. ↓

fix No workaround currently; consider using Vite for source maps.

gotcha SFC src imports (e.g. <template src='./template.html'>) are not supported. ↓

fix Inline templates/scripts/styles in the .vue file.

gotcha Custom blocks (<i18n>, <docs>) are ignored. ↓

fix Handle custom blocks with a separate loader.

Install

npm install esbuild-plugin-vue-iii

yarn add esbuild-plugin-vue-iii

pnpm add esbuild-plugin-vue-iii

Imports

vue3Plugin

wrong

const { vue3Plugin } = require('esbuild-plugin-vue-iii')

correct

import { vue3Plugin } from 'esbuild-plugin-vue-iii'

Package ships both ESM and CJS; named export is preferred.

default (vue3Plugin)
```
import vue3Plugin from 'esbuild-plugin-vue-iii'
```
Default export is also available, same as named export.
build (esbuild)
wrong
```
const build = require('esbuild').build
```
correct
```
import { build } from 'esbuild'
```
CommonJS require still works but ESM is recommended.

Quickstart

Shows minimal usage of esbuild with the Vue 3 SFC plugin to bundle a TypeScript entry point.

import { build } from 'esbuild';
import { vue3Plugin } from 'esbuild-plugin-vue-iii';

build({
  entryPoints: ['src/main.ts'],
  bundle: true,
  outdir: 'dist',
  plugins: [vue3Plugin()],
}).catch(() => process.exit(1));