This might fix some fears.
Sometimes we end up with some logic if/elseif/else in our vue hierarchy. This might be because of complex logic or pure architectural skills. In my case, I had the “pleasure” of both.
I had a container that have to display data (from store) in create and view mode. I had every 5th line to check is it view mode? Later we had to adjust for different entity now, 2 case doubled — becoming 4. And of course the test to write for such “complex” container would be very challenging.
Off I was for creating separate containers for each case — easy to test — easy to maintain. But what about the layout/markup sync. How do deal with updating layout in all components that “describe” it. Sure thing for UI team minor change in mock wouldn’t be a problem for dev team, would I it?
VueLayout to the rescue!
Basically I’ve ended up with new
BaseWhateverLayout.vue with markup and slots
and the test file
Now, I have one copy of layout used in all may cases. Basically my nightmarish container would became:
Nothing fancy, but worth to mention that now every component share same layout described above. And in no time we can change it.
Questions? I’d like to help.