Build Vue Components with ESBuild

Simple projects may be able to compile modules using the command line, but if you're trying do anything complicated enough to need plugins, you need to use the ESBuild node modules instead.

Create a file named build.js and compile by running the file with node build.js

Single entry point

With multiple entry points, you must specify an output directory

1const ESBuild = require("esbuild")
2const vue = require("esbuild-vue")
3
4ESBuild.build({
5  entryPoints: ["./src/stories/DevToolbar.vue"],
6  bundle: true,
7  outfile: "lib/index.vue",
8  plugins: [vue()],
9  define: {
10    "process.env.NODE_ENV":
11      JSON.stringify("production"),
12  },
13})
14

Multiple entry points

With multiple entry points, you must specify an output directory

1const ESBuild = require("esbuild")
2const vue = require("esbuild-vue")
3
4ESBuild.build({
5  entryPoints: [
6    "./src/stories/DevToolbar.vue",
7    "./src/stories/Dropdown.vue",
8    "./src/stories/HostItem.vue",
9    "./src/stories/Item.vue",
10    "./src/stories/Button.vue",
11  ],
12  bundle: true,
13  outdir: "lib",
14  plugins: [vue()],
15  define: {
16    "process.env.NODE_ENV":
17      JSON.stringify("production"),
18  },
19})
20

Build Vue Components with ESBuild

Single entry point

Multiple entry points

Want news and updates?