Fallback Content

An empty order shows only Total: €0, and a button that has nothing to clear. A short message would be friendlier, and the panel can bring one itself. What you write between <slot> and </slot> is the slot's fallback content: it shows when the parent gives the slot no content.

<template>
    <section class="panel">
        <h2>{{ title }}</h2>
        <slot>
            <p>Nothing here yet.</p>
        </slot>
    </section>
</template>

<Panel title="News" />
<Panel title="Opening hours">
    <p>Every day from 7 am to 7 pm.</p>
</Panel>

The panel News has no content, so it shows Nothing here yet. The panel with the opening hours shows its paragraph, and its fallback content isn't on the page at all.

Content that shows nothing counts as no content. When everything between the tags has a v-if whose condition is false, the slot is empty, and the fallback content shows. Several elements can share one v-if in a <template v-if>, as you know from Conditions and Lists:

<Panel title="Your order">
    <template v-if="order.length > 0">
        <ul>
            ...
        </ul>
        <p>Total: €{{ total }}</p>
    </template>
</Panel>

While the order is empty, the panel says Nothing here yet. Once something is in it, the panel shows the list and the total.

A typical mistake: a self-closing <slot /> with the text after it, as <slot /><p>Nothing here yet.</p>. The paragraph is then an ordinary part of the panel, and it always shows, under the content.