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

js
const ESBuild = require("esbuild")
const vue = require("esbuild-vue")
ESBuild.build({
entryPoints: ["./src/stories/DevToolbar.vue"],
bundle: true,
outfile: "lib/index.vue",
plugins: [vue()],
define: {
"process.env.NODE_ENV":
JSON.stringify("production"),
},
})

Multiple entry points

With multiple entry points, you must specify an output directory

js
const ESBuild = require("esbuild")
const vue = require("esbuild-vue")
ESBuild.build({
entryPoints: [
"./src/stories/DevToolbar.vue",
"./src/stories/Dropdown.vue",
"./src/stories/HostItem.vue",
"./src/stories/Item.vue",
"./src/stories/Button.vue",
],
bundle: true,
outdir: "lib",
plugins: [vue()],
define: {
"process.env.NODE_ENV":
JSON.stringify("production"),
},
})
Professional headshot
Moulton
Moulton

Hey there! I'm a developer, designer, and digital nomad building cool things with Remix, and I'm also writing Moulton, the Remix Community Newsletter

About once per month, I send an email with:

  • New guides and tutorials
  • Upcoming talks, meetups, and events
  • Cool new libraries and packages
  • What's new in the latest versions of Remix

Stay up to date with everything in the Remix community by entering your email below.

Unsubscribe at any time.