Content distribution with slots

Sometimes you want to build a component that can be used to put other elements or components inside it. You may want to build a generic modal dialog component but give the user of your component the ability to write the text of the modal dialog. Alternatively, maybe you want to use a general layout in a component and fill it with other elements. Slots are a way to have a fixed structure in one component and delegate the contents of certain parts of it to the father.

Getting ready

I suggest you to go on and complete the Using components in your own components recipe as it explains the important concept of scope. We will cover that here also, but "repetita iuvant".

How to do it...

The Russian cat mafia, in order to improve the morale of cats, decides to put up a web page with the best employee of the month and decides to write a Vue component for that.

They hire you as the principal developer to help them you write the following component:

Vue.component('framed',...