How can I show the components based on user's account registration condition? Firebase

I am Vue and firebase beginner and got at account auth. I want to show the contents only if a user is logged in. If not, I want them to show the Login component. If they don't have the account, I want to show the Register component. I tried as below but was not successful. Please advise or I'd appreciate any suggestion!

<div v-if="isLogin" >
      <Message />  
</div>
<div v-else-if="auth.user">
      <Login />
</div>
<div v-else >
      <Register />
</div>

CodePudding user response：

the only way im aware of to tell if a user has made an account in the past even if their not logged in would be to use a cookie or localstorage variable. but that seems overly complicated for something where you could just show the login page if their not signed in and offer a link under the login boxes to the registration page if they need to make an account.

aside from that, you're current code should look a little more like this.

    <div v-if="auth.user" >
      <Message />  
    </div>
     <div v-else>
       <Login />
       <Register />
     </div>