Files

T

fargo 1a822493ba format: apply repo prettier (3.8.1) to the folded skills tree

963 markdown files reformatted with the repository's pinned prettier so
pnpm format:check covers the folded tree like every other repo file.

The formatter's embedded-language pass also normalized code fences
(TS semicolons, closed HTML tags in examples, lowercased CSS hex colors,
one renumbered list that skipped an index). Alphanumeric token deltas vs
the fold commit were audited file-by-file; all are formatter-equivalent
markup normalizations plus the four sanitized skills.

2026-08-19 14:37:17 -05:00

3.9 KiB

Raw Permalink Blame History

title, impact, impactDescription, type, tags

title

impact

impactDescription

type

Use $slots to Conditionally Render Slot Wrapper Elements

Impact: MEDIUM - When building reusable components with optional slots, wrapper elements (divs, sections, etc.) will render even if no slot content is provided. This can cause layout issues, unnecessary DOM nodes, and styling problems. Use the $slots property to conditionally render wrappers only when slots have content.

Task Checklist

Check $slots before rendering wrapper elements for optional slots
Use v-if="$slots.slotName" to conditionally render wrappers
Remember that $slots.default checks the default slot
Keep DOM clean by avoiding empty wrapper elements

Incorrect:

<!-- Card.vue -->
<template>
  <div class="card">
    <!-- BAD: Header wrapper renders even with no content -->
    <div class="card-header">
      <slot name="header" />
    </div>

    <!-- BAD: Empty div with padding/margin affects layout -->
    <div class="card-body">
      <slot />
    </div>

    <!-- BAD: Footer renders as empty element -->
    <div class="card-footer">
      <slot name="footer" />
    </div>
  </div>
</template>

<style scoped>
.card-header {
  padding: 16px;
  border-bottom: 1px solid #eee;
}
.card-footer {
  padding: 16px;
  border-top: 1px solid #eee;
}
</style>

When used without all slots:

<!-- Results in empty .card-header and .card-footer divs with borders -->
<Card>
  <p>Just body content</p>
</Card>

Correct:

<!-- Card.vue -->
<template>
  <div class="card">
    <!-- GOOD: Only render header wrapper if slot has content -->
    <div v-if="$slots.header" class="card-header">
      <slot name="header" />
    </div>

    <!-- GOOD: Check default slot -->
    <div v-if="$slots.default" class="card-body">
      <slot />
    </div>

    <!-- GOOD: Footer only renders when provided -->
    <div v-if="$slots.footer" class="card-footer">
      <slot name="footer" />
    </div>
  </div>
</template>

<style scoped>
.card-header {
  padding: 16px;
  border-bottom: 1px solid #eee;
}
.card-footer {
  padding: 16px;
  border-top: 1px solid #eee;
}
</style>

Now clean DOM:

<!-- Only renders .card-body, no empty header/footer -->
<Card>
  <p>Just body content</p>
</Card>

Advanced: Using $slots in Script Setup

<script setup>
import { useSlots, computed } from 'vue';

const slots = useSlots();

const hasHeader = computed(() => !!slots.header);
const hasFooter = computed(() => !!slots.footer);

// Can also check slot content conditionally in logic
function getLayoutClass() {
  if (slots.header && slots.footer) return 'full-layout';
  if (slots.header) return 'header-only';
  if (slots.footer) return 'footer-only';
  return 'minimal';
}
</script>

<template>
  <div :class="['card', getLayoutClass()]">
    <header v-if="hasHeader">
      <slot name="header" />
    </header>
    <main>
      <slot />
    </main>
    <footer v-if="hasFooter">
      <slot name="footer" />
    </footer>
  </div>
</template>

When to Use This Pattern

Scenario	Use $slots Check?
Wrapper has styling (padding, borders, background)	Yes
Wrapper affects layout (flex, grid)	Yes
Slot is always expected to have content	No
No wrapper element around slot	No
Wrapper is purely semantic (no visual impact)	Optional

Reference

Vue.js Slots - Conditional Slots

3.9 KiB Raw Permalink Blame History