Hacker News Reader

Comment by haberman | Hacker News Reader

When I first heard that jQuery is gone, it made me hope that Bootstrap could work directly with Vue without needing to use BootstrapVue.

But then I realized that it's probably still doing direct DOM manipulation, which is what makes it incompatible with Vue I think?

View on HN

Direct DOM manipulations are not necessarily incompatible with Vue or React.

I'm not sure in this specific case, but I'm saying this in general because there seems to be a common misconception. People jump through the craziest, smallest, highest, flaming-ist hoops to get everything to render through Vue/React. Using virtual scrollers that aren't fit for purpose. Trying to get d3/plotly running on the VDOM. Etc etc.

You can always just pop a DOM ref out and let something else take control of it; easy peasy.

While it’s possible to use direct DOM manipulation via refs, IMO this defeats the purpose of using a reactive lib like Vue or React. If you are using a lib like jQuery/D3 with Vue/React, you are basically just using Vue/React to render the initial state of the DOM.

If your entire site's React/Vue implementation is solely serving up DOM elements to other libraries perhaps.

Frequently it's the case though where like 99.99%(hyperbole) of the site is handled by React/Vue and you just need a few specific components to be controlled by an external lib. Heck, anything wrapping a canvas based lib is pretty much doing this.. Tons of component libs do this. It's very "web component" like to let something control a slice of the DOM anyway.

I agree that sometimes its okay to give another lib control of the DOM (D3 probably falls in this category). However in the context of the parent comment where haberman is wondering if Bootstrap could work directly with Vue (which it could) I still hold that this is missing the point. In this case Vue would be nothing but a glorified templating engine. I would rather only use the boostrap styles while writing my own logic with Vue's reactivity model.

I can attest to this. I had the hardest time getting a vue wrapped google maps library to work, until I decided enough is enough and used the native google maps sdk. Perfectly doable and can save you a ton of time. If possible use a vue/react compatible library, but don't do it at all cost.

Can the interactive / JS parts of Bootstrap be reimplemented in a way 'native' to Vue or React? I'm probably naive but I can't imagine the JS parts are that complicated (things like collapses, menus, changing classes, etc).

Yes they can. Libraries like reactstrap and sveltestrap do just this.

It's definitely going to make it a lot easier than it is now. It's really not bad working with external libraries in Vue. I imagine the way that Bootstrap does it's Javascript will leave you doing a lot inside of Vue's lifecycle hooks (beforeMount, mount, etc).

You're probably better off with BootstrapVue (or one of the React equivalents) because they're doing dom manipulation...

The libraries based on bootstrap should just be rendering components with matching classnames etc.

You don't need to use BootstrapVue at all. For things like Modals just add the appropiate divs and change classes in the same order.

Reply on news.ycombinator.com