While Vite has been gaining attention in the Vue.js community as a JavaScript build tool, I personally favor Parcel for building my 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. Vue.js 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 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. Vite 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 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. Parcel documentation Fix 1: package.json - Vue Bundle In your you'll want to add an alias section. This will let Parcel know the correct version of Vue to use when bundling your application. package.json "alias": {
  "vue": "vue/dist/vue.esm-browser.js"
}, Special Note for Production Builds Right now there is 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 . I just use a pre-build command in my CI/CD to switch that out for production builds: a bug vue.esm-browser.prod.js 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 and also to your . It doesn't hurt to add them and to be explicit about what you're building. I also like to use often because I want Parcel to build multiple things. type targets package.json targets "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.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

SQLite the New Hotness?! 🤔

Making GraphQL Queries in Python Like a Boss

fixin bugs and making more

Book a call

Nominated for 2022 - Android Advocate of the Year

Nominated for 2022 - HackerNoon Contributor of the Year - Privacy

Too Long; Didn't Read

Make resilience your competitive advantage

Using Vue 3 with Parcel JS

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

SQLite the New Hotness?! 🤔

10 Top Industries To Be Transformed By Artificial Intelligence, Soon

10 Essential Mobile App UI Design Principles for Building Outstanding Apps

11 AI & ML App Ideas For Startups and SME’s In 2019

11 Best Low-Code And No-Code Platforms in 2021

SQLite the New Hotness?! 🤔

10 Top Industries To Be Transformed By Artificial Intelligence, Soon

10 Essential Mobile App UI Design Principles for Building Outstanding Apps

11 AI & ML App Ideas For Startups and SME’s In 2019

11 Best Low-Code And No-Code Platforms in 2021

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps