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!

It's shorthand for the [`v-slot`](https://vuejs.org/v2/api/#v-slot) attribute. — Edric, Sep 03 '20 at 20:22
"Googling a # isn't an easy thing to do." I agree, thanks for the question ! — Thakur Karthik, Oct 14 '20 at 08:55
"Googling a # isn't an easy thing to do" -> Googling for this was really a nightmare actually. Even after reading this, I still can't find where the docs mention this, apart from saying "shorthand: #" next to [v-slot](https://vuejs.org/v2/api/#v-slot)... Many thanks for asking the answer and wording it in such a way that it was searchable — Aurelio, Feb 12 '21 at 17:18

score 24 · Accepted Answer · edited Jul 15 '22 at 20:04

24

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.

edited Jul 15 '22 at 20:04

tony19

125,647
18
229
307

answered Sep 03 '20 at 20:25

Edric

24,639
13
81
91

Thank you sir! I will mark you as the answer. Of course now that i know what to google i find it everywhere! – dustbuster Sep 03 '20 at 20:29

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

1 Answers1

Linked