How to Get Rid of Extra Template Tags

Scoped slots are lots of fun, but in order to use them you have to use a lot of template tags, too.

Luckily, there's a shorthand that let's us get rid of it, but only if we're using a single scoped slot.

Instead of writing this:

<DataTable>
  <template #header="tableAttributes">
    <TableHeader v-bind="tableAttributes" />
  </template>
</DataTable>

We can write this:

<DataTable #header="tableAttributes">
  <TableHeader v-bind="tableAttributes" />
</DataTable>

Simple, straightforward, and marvelous.

(Ok, maybe not quite marvelous, but still pretty good)

I actually have a whole course on writing cleaner Vue code like this.