How to Use Named Slots in Vue

<!-- Card component with named slots -->
<template>
  <div class="card">
    <div class="card-header">
      <slot name="header">
        <!-- Default header content -->
        <h3>Default Title</h3>
      </slot>
    </div>

    <div class="card-body">
      <slot>
        <!-- Default slot (unnamed) -->
        <p>Default content goes here</p>
      </slot>
    </div>

    <div class="card-actions">
      <slot name="actions">
        <!-- Default actions -->
        <button>Default Action</button>
      </slot>
    </div>

    <div class="card-footer" v-if="$slots.footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<script setup>
// Component logic here
</script>

<!-- Using the Card component with named slots -->
<template>
  <div>
    <!-- Example 1: Using all named slots -->
    <Card>
      <template #header>
        <h2>Custom Header</h2>
        <p>Subtitle here</p>
      </template>

      <template #default>
        <p>This content goes in the main slot</p>
        <ul>
          <li>Item 1</li>
          <li>Item 2</li>
        </ul>
      </template>

      <template #actions>
        <button @click="handleSave">Save</button>
        <button @click="handleCancel">Cancel</button>
      </template>

      <template #footer>
        <small>Last updated: {{ lastUpdated }}</small>
      </template>
    </Card>

    <!-- Example 2: Using v-slot syntax -->
    <Card>
      <template v-slot:header>
        <h2>Another Card</h2>
      </template>

      <p>Content without template wrapper</p>

      <template v-slot:actions>
        <button>Action Button</button>
      </template>
    </Card>

    <!-- Example 3: Conditional slots with scoped data -->
    <UserCard>
      <template #avatar="{ user }">
        <img :src="user.avatar" :alt="user.name" />
      </template>

      <template #content="{ user }">
        <h3>{{ user.name }}</h3>
        <p>{{ user.email }}</p>
      </template>
    </UserCard>
  </div>
</template>

<script setup>
import Card from './Card.vue'
import UserCard from './UserCard.vue'

const lastUpdated = new Date().toLocaleDateString()

const handleSave = () => {
  console.log('Saving...')
}

const handleCancel = () => {
  console.log('Cancelled')
}
</script>