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.

Want to level up your Vue skills?

With over two million reads and 11,067 subscribers, you've come to the right place.

Subscribe now to get exclusive insights and tips every week.