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.

Get my FREE book on Vue 3!

Vue 3 Book