Jacob Paris
← Back to all content

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
Professional headshot

Hi, I'm Jacob

Hey there! I'm a developer, designer, and digital nomad with a background in lean manufacturing.

About once per month, I send an email with new guides, new blog posts, and sneak peeks of what's coming next.

Everyone who subscribes gets access to the source code for this website and every example project for all my tutorials.

Stay up to date with everything I'm working on by entering your email below.

Unsubscribe at any time.