Hacker News Reader

Comment by Rapzid | Hacker News Reader

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.

View on HN

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.

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.

Reply on news.ycombinator.com