https://github.com/pipe01/esbuild-plugin-vue3
esbuild plugin for loading Vue 3 SFC files
https://github.com/pipe01/esbuild-plugin-vue3
esbuild esbuild-plugin sfc vue vue3 vuejs vuejs3
Last synced: 4 months ago
JSON representation
esbuild plugin for loading Vue 3 SFC files
- Host: GitHub
- URL: https://github.com/pipe01/esbuild-plugin-vue3
- Owner: pipe01
- License: mit
- Created: 2021-07-19T10:59:08.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2025-10-22T19:58:39.000Z (8 months ago)
- Last Synced: 2026-01-22T09:25:28.344Z (5 months ago)
- Topics: esbuild, esbuild-plugin, sfc, vue, vue3, vuejs, vuejs3
- Language: TypeScript
- Homepage:
- Size: 187 KB
- Stars: 62
- Watchers: 3
- Forks: 16
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# esbuild-plugin-vue3
[](https://badge.fury.io/js/esbuild-plugin-vue3)
[esbuild](https://esbuild.github.io/) plugin for resolving and loading Vue.js 3 SFCs.
This plugin is meant to mimick the default [Vue CLI](https://cli.vuejs.org/) behaviour, for example it supports path aliases defined in the tsconfig.json file.
## Install:
```
npm i -D esbuild-plugin-vue3
```
## Supported
* HTML and Pug ``
* JavaScript and TypeScript `` and `<script setup>` (the latter is still experimental)
* CSS, SCSS and SASS `<style>`
* Path aliases from tsconfig.json, e.g. `import "@/Component.vue"` resolves to `import "../../Component.vue`
* Emit HTML file and inject output CSS and JS files
## Usage
Simple usage, this will resolve all `.vue` imports and load its parts independently. By default path aliases will be loaded from the tsconfig.json file, if any.
```js
const esbuild = require("esbuild")
const vuePlugin = require("esbuild-plugin-vue3")
esbuild.build({
entryPoints: ["src/app.ts"],
bundle: true,
outfile: "dist/app.js",
plugins: [vuePlugin()]
})
```
More advanced usage, generating HTML file:
```js
const esbuild = require("esbuild")
const vuePlugin = require("esbuild-plugin-vue3")
esbuild.build({
entryPoints: ["src/app.ts"],
bundle: true,
outfile: "dist/app.js",
entryNames: '[dir]/[name]-[hash]',
metafile: true,
plugins: [vuePlugin({
generateHTML: "src/index.html"
// Or:
generateHTML: {
sourceFile: "src/index.html",
pathPrefix: "assets/",
preload: [{ href: "https://example.com/my-external.css", as: "stylesheet" }]
}
})]
})
```
### The library is still not thoroughly tested, use at your own risk.