Vue.js error: Named slots must use '<template>' on a custom element

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>

demo