I am trying to pass information through slots and I keep getting an error,
'Named slots must use '' on a custom element.'
See below for my code.
<template>
<div>
<h3>Home</h3>
<User v-slot:user="{ user }">
<template>
<div v-if="user">
<p>Logged-in as {{user.uid}} </p>
<!-- PASS USER STATE AS PROP -->
<UserProfile :user="user"/>
<ChatList :uid="user.uid"/>
</div>
<Login v-else/>
</template>
</User>
</div>
</template>
I get an error on the following line.
<User v-slot:user="{ user }">
Based on your component names, I suspect the User component contains the "user" slot.
The v-slot should be on a <template> within the <User> tags:
<User> 👇
<template v-slot:user="{ user }">
<div v-if="user">
<p>Logged-in as {{ user.uid }}</p>
</div>
<Login v-else />
</template>
</User>