Vanilla JavaScript Component Libs Versus Vue Component Libs

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.

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.

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.

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.

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.

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.