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.