Registry / web-framework / esbuild-plugin-vue

esbuild-plugin-vue

library0.2.4jsnpmunverified

esbuild-plugin-vue provides basic support for processing Vue 3 Single File Components (SFCs) directly within esbuild build pipelines. It enables core features like `<script setup>` syntax, TypeScript integration within script blocks, and scoped CSS styles, allowing developers to leverage esbuild's speed for compiling Vue applications. As of version 0.2.4, it is considered pre-1.0, indicating ongoing development and potential for API changes without strictly adhering to semantic versioning until a 1.x release. The plugin differentiates itself by offering a lightweight, esbuild-native solution for Vue SFC compilation, aiming for simplicity and performance over the more extensive feature sets of dedicated Vue build tools like Vite or Vue CLI. It utilizes `@vue/compiler-sfc` under the hood to perform the actual Vue compilation. The package appears to be actively maintained, evidenced by recent updates and a call for sponsorship.

web-framework serialization

package ↗

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

The plugin factory is the default export. Destructuring it will result in an undefined value.

import vue from 'esbuild-plugin-vue'

While esbuild supports CommonJS, modern usage and examples (including for this plugin) primarily use ESM imports.

import { build } from 'esbuild'

When writing custom esbuild plugins or extending existing ones, import the Plugin type for type safety.

import type { Plugin } from 'esbuild'

Demonstrates how to integrate `esbuild-plugin-vue` into an esbuild configuration to compile a basic Vue 3 SFC with `<script setup>`, TypeScript, and scoped styles.

import { build } from 'esbuild'; import vue from 'esbuild-plugin-vue'; import path from 'path'; import fs from 'fs'; // Create a dummy Vue SFC for demonstration const vueComponentContent = ` <template> <div>Hello from Vue, {{ message }}!</div> </template> <script setup lang="ts"> import { ref } from 'vue'; const message = ref('esbuild-plugin-vue'); </script> <style scoped> div { color: #42b983; } </style> `; const entryPointPath = path.resolve(__dirname, 'src', 'main.ts'); const vueComponentPath = path.resolve(__dirname, 'src', 'App.vue'); fs.mkdirSync(path.dirname(entryPointPath), { recursive: true }); fs.writeFileSync(vueComponentPath, vueComponentContent); fs.writeFileSync(entryPointPath, `import App from './App.vue'; console.log(App);`); (async () => { try { await build({ entryPoints: [entryPointPath], bundle: true, outfile: path.resolve(__dirname, 'dist', 'bundle.js'), plugins: [vue()], format: 'esm', logLevel: 'info' }); console.log('Build successful!'); } catch (e) { console.error('Build failed:', e); } })();

Debug

Known footguns

breakingAs a pre-1.0 package (version 0.2.4), `esbuild-plugin-vue` may introduce breaking changes in minor or patch releases without strict adherence to semantic versioning. Users should review changelogs carefully when upgrading.

gotchaThe plugin has a specific peer dependency range for `esbuild` (`>=0.11 <=1`). Installing a version of `esbuild` outside this range (e.g., a future 0.x release beyond 0.11 but still before 1.0, or a hypothetical esbuild 2.0) might lead to incompatibility issues or runtime errors.

gotchaThe plugin provides 'basic .vue support' and might not cover all advanced features or edge cases of Vue SFC compilation found in more mature, official build tools like Vite or Vue CLI. Complex setups or highly optimized scenarios might require additional esbuild plugins or manual configuration.

Upgrade

Version history

Breaking-change detection hasn't run for this library yet.

Audit

Security & dependencies

CVE tracking and dependency tree are planned for a later release.

Agent activity

9 hits · last 30 days

gptbot

ahrefsbot

script

bingbot

Resources

packagehttps://www.npmjs.com/package/esbuild-plugin-vue ↗