View profile

Vanilla JavaScript Component Libs Versus Vue Component Libs

Vanilla JavaScript Component Libs Versus Vue Component Libs
By Mastering JS Weekly • Issue #71 • View online
Recently, we had to implement toasts and toggles for a client that’s building a new Vue app from scratch. I get a sinking feeling of dread every time I start looking at framework-specific component libraries: they’re usually out of date and broken. Reminds me of 2013-era ngWizBang packages that somehow managed to always break no matter what I did. But I decided to bite the bullet and try out the state of Vue toasts and toggles.

Vue Toggle Libraries
Like most developers in my shoes, the first thing I did was type “vue toggle” into Google and pick the first npm package that showed up. vue-js-toggle-button. Looks promising, nice README, live examples look neat. Let’s try it.
First red flag: last published 2 years ago
First red flag: last published 2 years ago
Unfortunately, vue-js-toggle-button doesn’t support Vue 3, and there’s no way to figure that out without trying. The only hint is a GitHub issue that suggests this project is abandoned, and recommends trying vue-toggles.
Last published a month ago, has a Netlify demo. Great, right?
Last published a month ago, has a Netlify demo. Great, right?
Vue Toggles looks nice, but once you take a look at the project’s GitHub issues you’ll find that there’s a “Vue 3 Support” issue with a “Help Wanted” label. Not great. But at least there’s a 3.0.0-beta5 version that supports Vue 3.
But then the issues start popping up. First, there’s no CDN version of Vue Toggles. So `npm install` it and add it to your Webpack build. But, once that’s all done, you end up with the below error, which makes it seem that Vue Toggles v3 still tries to do `Vue.use()` to register the component.
I guess vue-toggles@3.0.0-beta.5 doesn't support Vue 3 after all?
I guess vue-toggles@3.0.0-beta.5 doesn't support Vue 3 after all?
The Trouble With Framework-Specific Libs
The unfortunate fundamental flaw with framework-specific component libraries is that most framework-specific component libs are designed to work with the developer’s stack and build system, not just the framework itself.
Component libs are rarely just a `.js` file that you can drop into a <script> tag and a `.css` file. Even if they are, getting them to work correctly can be tricky. For example, the case of Vue Toggles: Vue Toggles registers the component in a Vue 2 specific way, which prevents you from using it in Vue 3.
So, instead of trying to patch Vue Toggles, I took W3 Schools’ simple JS-free toggle and wrapped it in a tiny 10 line Vue component.
Vue toggle with 10 lines of JS
Vue toggle with 10 lines of JS
The Case for Vanilla JS Components in Vue
I had a similar experience working with Vue toast libraries, so I ended up just using the delightfully simple VanillaToasts npm module.
Going forward, my approach will be to wrap Vanilla JS libraries in Vue, rather than using Vue-specific component libraries. Why? Here’s a couple of reasons:
1) Minimize compatibility issues. W3 Schools’ slider and VanillaToasts work fine whether you’re using Vue 2, Vue 3, Svelte, or something completely different. Because of TC39’s “Don’t Break the Web” stance, you can expect that Vanilla JavaScript you write today will continue to work in perpetuity. To upgrade framework versions or switch to a different framework, all you need to do is fix your wrapper logic. And writing wrappers is easy using tools like Vue refs.
2) Minimize build issues. W3 Schools’ slider and VanillaToasts work fine regardless of whether you import them via <script> tag or via Webpack. They work with ESM or CommonJS, SFC or JSX, TypeScript or JavaScript. I do so like Green Eggs and Ham, thank you, Vanilla JS components I am.
I do not work with Vue 2, I do not work with Vue 3, I do not work anywhere
I do not work with Vue 2, I do not work with Vue 3, I do not work anywhere
Most Recent Tutorials
How to Use JavaScript's Object.values() Function - Mastering JS
How to Handle Window Resize Events in Vue - Mastering JS
The Vue Button `click` Event - Mastering JS
What We're Reading
NPM package with 3 million weekly downloads had a severe vulnerability | Ars Technica
Did you enjoy this issue?
Mastering JS Weekly

Pragmatic web development. No bloatware allowed!

In order to unsubscribe, click here.
If you were forwarded this newsletter and you like it, you can subscribe here.
Powered by Revue