How to display components based on user's account registration conditions? Firebase | Vue

Question

I am a beginner with Vue and firebase and got account authentication. I only want to display the content when the user is logged in. If not, I want them to show the login component. If they don't have an account, I want to show the registration component. I tried the following without success. Please make suggestions or I'd be grateful!

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

Answer 1

The only way I know of to tell if a user has created an account in the past (even if they haven't logged in) is to use a cookie or a local storage variable. But this seems overly complicated for something where you can show a login page when not logged in and provide a link to a registration page below the login box if they need to create an account.

Beyond that, your current code should look more like this.