Shorthand for Named Slots

Named slots also have a shorthand syntax, one that's much nicer to look at.

Instead of writing this:

<DataTable>
<template v-slot:header>
<TableHeader />
</template>
</DataTable>

We can write this:

<DataTable>
<template #header>
<TableHeader />
</template>
</DataTable>

Not a huge difference, but a little cleaner for sure. I think the # character is easier to pick out than v-slot when reading code.

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.