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!
VA

--

--