What do the hash marks (#) mean in Vue?

Question

I am a rather new Vue developer. Everywhere I go in our stack, I see code like this inside our components components:

<template #item.active="{ value }">
  <div :aria-label="String(value)" class="text-center">
    <v-icon v-if="value === null">mdi-minus</v-icon>
    <v-icon v-else color="red">mdi-close</v-icon>
  </div>
</template>

And for the life of me, I am cannot figure out what the #item.active (specifically the #) actually does. We have many hashed items. Like <template #item.actions-prepend="{item}"> or <template #toolbar-extension>

Googling a # isn't an easy thing to do. And apparently I missed this specific video in my Vue tutorials! We use Nuxt and Vuetify, not sure if that helps!

Answer 1

As mentioned in the comments, the # symbol is a shorthand for the v-slot attribute, as hinted by the usage of <template> (which v-slot only allows to be used on, as well as components) in your code.