{"id":10807,"library":"esbuild-plugin-vue","title":"esbuild Vue Plugin","description":"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.","status":"active","version":"0.2.4","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","typescript"],"install":[{"cmd":"npm install esbuild-plugin-vue","lang":"bash","label":"npm"},{"cmd":"yarn add esbuild-plugin-vue","lang":"bash","label":"yarn"},{"cmd":"pnpm add esbuild-plugin-vue","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core bundler that the plugin integrates with; specified as a peer dependency.","package":"esbuild","optional":false},{"reason":"Required for compiling Vue Single File Components (SFCs); explicitly mentioned in installation.","package":"@vue/compiler-sfc","optional":false}],"imports":[{"note":"The plugin factory is the default export. Destructuring it will result in an undefined value.","wrong":"import { vue } from 'esbuild-plugin-vue'","symbol":"vue","correct":"import vue from 'esbuild-plugin-vue'"},{"note":"While esbuild supports CommonJS, modern usage and examples (including for this plugin) primarily use ESM imports.","wrong":"const { build } = require('esbuild')","symbol":"build","correct":"import { build } from 'esbuild'"},{"note":"When writing custom esbuild plugins or extending existing ones, import the Plugin type for type safety.","symbol":"Plugin","correct":"import type { Plugin } from 'esbuild'"}],"quickstart":{"code":"import { build } from 'esbuild';\nimport vue from 'esbuild-plugin-vue';\nimport path from 'path';\nimport fs from 'fs';\n\n// Create a dummy Vue SFC for demonstration\nconst vueComponentContent = `\n<template>\n  <div>Hello from Vue, {{ message }}!</div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue';\nconst message = ref('esbuild-plugin-vue');\n</script>\n\n<style scoped>\ndiv {\n  color: #42b983;\n}\n</style>\n`;\nconst entryPointPath = path.resolve(__dirname, 'src', 'main.ts');\nconst vueComponentPath = path.resolve(__dirname, 'src', 'App.vue');\n\nfs.mkdirSync(path.dirname(entryPointPath), { recursive: true });\nfs.writeFileSync(vueComponentPath, vueComponentContent);\nfs.writeFileSync(entryPointPath, `import App from './App.vue'; console.log(App);`);\n\n(async () => {\n  try {\n    await build({\n      entryPoints: [entryPointPath],\n      bundle: true,\n      outfile: path.resolve(__dirname, 'dist', 'bundle.js'),\n      plugins: [vue()],\n      format: 'esm',\n      logLevel: 'info'\n    });\n    console.log('Build successful!');\n  } catch (e) {\n    console.error('Build failed:', e);\n  }\n})();","lang":"typescript","description":"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."},"warnings":[{"fix":"Always test new versions in a development environment before deploying to production. Monitor the package's GitHub repository for pre-release announcements or breaking change notes.","message":"As 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.","severity":"breaking","affected_versions":">=0.1.0"},{"fix":"Ensure your `esbuild` version precisely matches the peer dependency range. Use `npm install esbuild@<version>` or `yarn add esbuild@<version>` to pin to a compatible version if necessary.","message":"The 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.","severity":"gotcha","affected_versions":"<=0.2.4"},{"fix":"For complex Vue applications, evaluate if this plugin meets all requirements. Be prepared to implement custom esbuild plugins or fallback to official Vue tooling if advanced features are missing or problematic.","message":"The 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.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Install the missing peer dependency: `npm install @vue/compiler-sfc` or `yarn add @vue/compiler-sfc`.","cause":"The `@vue/compiler-sfc` package, which `esbuild-plugin-vue` depends on for Vue SFC compilation, is not installed.","error":"Error: Cannot find module '@vue/compiler-sfc'"},{"fix":"Install `esbuild` to a compatible version: `npm install esbuild@\"^0.x.y\"` (replacing `x.y` with a version within the plugin's specified range `\">=0.11 <=1\"`).","cause":"`esbuild` itself, the core bundler, is either not installed or its version does not match the plugin's peer dependency range.","error":"Plugin \"vue\" failed with error: [Error: build-stdio] 'esbuild' peer dependency not found."},{"fix":"Change your import statement from `import { vue } from 'esbuild-plugin-vue'` to `import vue from 'esbuild-plugin-vue'`.","cause":"Attempting to destructure `vue` as a named export when it is exported as the default.","error":"SyntaxError: Named export 'vue' not found. Did you mean to import the default export?"}],"ecosystem":"npm"}