> how do you conditionally wrap some elements in another element ?
You use a dynamic component:
<component :is="condition ? 'WrappedComponent' : 'UnwrappedComponent"></component>
> That is a general theme, I've found - compared to React, Vue makes the easy things easier, but the hard things harder.
While react make the easy things annoying. It took me an afternoon to be productive with vue, several weeks with react.
And all that for what?
Having the privilege to "just use javascript"? Here is "just javascript" in jsx:
{items.map((items) => (
{display && <SomeElement
onClick={e => e.preventDefault() && foo()}
className="`${active ? 'current' : ''}`" />}
))}
Here is the same in vue template:
<SomeElement
v-for="item in items"
v-if="display"
@click.prevent="foo()"
:class="{'current': active}" />
Not only the react blob is impossible to scan, but it will be different depending of the dev who coded it, because there is no enforced patterns. You must use brain power to parse every single template line. HTML, that thing that was simple and declarative, now becomes complicated and imperative.
And that's not even weird or unusual code. That's regular stuff one writes all the time. Don't get me started on state management or spaghetti hooks.
I have yet to work on a react code base I was more productive than on a vue one. And the gaps get wider if the team is not composed of excellent coders, because react code by junior is a nightmare.