Vue Layout Component

Vitalie Andries
2 min readJan 23, 2020

This might fix some fears.

Photo by Hal Gatewood on Unsplash

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 BaseWhateverLayout.spec.ts:

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.

Happy coding!