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', {   template: `<div class="frame">                <h3>Russian cat mafia                     employee of the month</h3>                <slot>Nothing framed.</slot>              </div>` })

The slot tag represents a placeholder in which you will put more content in the parent template. Of course, you add some CSS to embellish the component:

.frame {   border: 5px dashed dodgerblue;   width: 300px; } h3 {   font-family: sans-serif;   text-align: center;   padding: 2px 0;   width: 100%; }

This is how the HTML ...

Get Vue.js 2 Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.