Using Vue 3 with Parcel JS

While Vite has been gaining attention in the Vue.js community as a JavaScript build tool, I personally favor Parcel for building my Vue.js applications. Although most tutorials and documentation tend to emphasize Vite or other popular build tools, this article aims to provide guidance on setting up Parcel for Vue.js projects. Now, let's explore the reasons why you might consider using Parcel.

Why Use Parcel?

While Vite works great and builds applications fast, it focuses on building things fast. That sounds great to a lot of people probably, but for me, that is an anti-pattern. Yes, I want my dev tools to be fast, but if that is the primary focus, then often times the developer experience is often a secondary concern.

Instead, I want developer tools that are primarily focused on developer experience and also fast. I think that Parcel delivers great on this promise. Most Javascript build tools like Vite end up being wrappers around existing tools but with the configuration obscured away and pre-configured for you. While this is great to get started fast, you eventually hit configuration roadblocks and complexity as your app grows. Parcel has a zero-configuration philosophy and is not a wrapper around older tools. Once you get past setting it up, you encounter far fewer configuration roadblocks as your app grows.

The only downside with using Parcel, especially with Vue, is that the setup is not documented as much as I would like. Additionally, with the release of Parcel 2 and Vue 3, there are a few quirks with the setup. Hopefully, they will get worked out in the future, but for now, the instructions below will show you how to set up a Vue app with Parcel.

Building a Vue 3 App with Parcel

To get started, you need a Vue 3 app. If you need to start one, the Parcel documentation is a good place to get a skeleton app to begin with. If you use just those instructions though, you'll probably get some errors or warnings we need to take care of.

Fix 1: package.json - Vue Bundle

In your package.json you'll want to add an alias section. This will let Parcel know the correct version of Vue to use when bundling your application.

"alias": {
  "vue": "vue/dist/vue.esm-browser.js"
},

Special Note for Production Builds

Right now there is a bug when you switch to production builds with Vue 3 and Parcel. So when you do a production build you need to switch the alias to vue.esm-browser.prod.js. I just use a pre-build command in my CI/CD to switch that out for production builds: sed -i 's/vue.esm-browser.js/vue.esm-browser.prod.js/g' package.json

Fix 2: package.json - Build type (may be needed)

Depending on your build target and your output context you may want to add type and targets also to your package.json. It doesn't hurt to add them and to be explicit about what you're building. I also like to use targets often because I want Parcel to build multiple things.

"type": "module",
"targets": {
  "myapp": {
    "source": "src/index.js",
    "distDir": "dist",
    "context": "browser",
    "outputFormat": "global"
  }
},

Fix 3: Main App JS - Silence More Warnings and Include Vue Options API

In your main app JS, you are probably getting additional warnings or you may want to include the Vue Options API. Put these variables in your initial app JS file to silence the dev tool warnings and explicitly set up the Vue Options API or not. You probably want to put them toward the top of the file.

__VUE_OPTIONS_API__ = true;

if (process.env.NODE_ENV !== 'production') {
  __VUE_PROD_DEVTOOLS__ = true;
} else {
  __VUE_PROD_DEVTOOLS__ = false;
}

Have fun with your new Vue 3 app development and throw out your aspirin as you'll now be on easy street and have far fewer configuration errors. Parcel JS will handle most other setups, even installing the transformers you'll need to compile things like Vue Single File Components and Typescript.