Compound components in Vue
Vue interview exercise on Provide, inject & stores, difficulty 3 of 3. Solve it in the editor beside a worked example, or cold in Interview mode with the example hidden; the tests run the moment you do.
Write Tabs and Tab. Tabs provides the shared state and renders <div class="tab-list"> with one <button> per registered tab (its title; class "active" on the selected one; clicking selects) and <div class="panels"> with the default slot. Tab (props `name`, `title`) registers itself with Tabs in setup and renders <section class="panel"> with its slot only while selected. The first registered tab starts selected; a Tab outside Tabs must throw an Error reading "<Tab> must be used inside <Tabs>".
Each exercise pairs a worked example with a twin problem to solve in a real editor; the tests run the moment you do. Interview mode hides the example: solve it from memory, without the hint or the solution, and it counts as solved cold. Progress is saved in your browser, and in your account if you sign in.