To start our component, we can create our Vue project with Vue-CLI, as we did in the Creating Your first project with Vue CLI recipe in Chapter 2, Introducing TypeScript and the Vue Ecosystem, or use the project from the Creating a visual template component recipe.
Follow these instructions to create slots and named slots in components:
- Let's open the file called MaterialCardBox.vue in the components folder.
- In the <template> part of the component, we will need to add four main sections on the card. Those sections are based on the Material Design card anatomy and are the header, media, main section, and action areas. We will use the default slot for the main section, and the rest will all be named scopes. For some named slots, we will add a fallback configuration that will be displayed if the user doesn't choose any setting on the slot:
<template>
<div class="cardBox elevation_2">
<div class="header">
...