title: In VueJS version 3, What is the correct way to Show and Hide the Login & Logout <router-link> links and viceversa which is placed on Nav Bar?
body: <p>I am newbie to VueJS. I have developed a simple Login Screen. After successful Login, Server will send userId in JSON format. I am storing this userId in localStorage. Using this, I thought of showing the Login  (before Login). Post Login, 1. the Logout  should be displayed and not Login &amp; 2. Login Component should be displayed on logout click</p>
  <p>In current code, Post Login, Logout link is not visible. I also tried v-else logic. That also did not worked. referce <a href="https://forum.vuejs.org/t/update-navbar-login-logout-button/103509" rel="nofollow noreferrer">https://forum.vuejs.org/t/update-navbar-login-logout-button/103509</a></p>
  <p>Let me know what mistake is there in the below code. Thanks in advance.</p>
  <p>App.vue</p>
  <pre><code>&lt;template&gt;
  &lt;div id=&quot;app&quot;&gt;
    &lt;Nav/&gt;
      &lt;router-view /&gt;
  &lt;/div&gt;
  
  &lt;/template&gt;
  
  &lt;script&gt;
  import  Nav from './components/Nav.vue'
  
  
  
  export default {
    name: 'App',
    components: {
      Nav
    },
    data() {
      return {
        form: {
         
          username:'',
          password:''
        },
        showError: false
      };
    },
  
   
   
  };
  &lt;/script&gt;
  
  
  &lt;style&gt;
  
  
  @import url('htpp://fonts.googleapis.com/css?family=Fira+Sans:400,500,600,700,800');
  
  * {
  box-sizing:border-box;
  }
  
  body{
  
  background: #fcfdfd !important;
  
  
  }
  
  body, html,#app, #root, .auth-wrapper{
  width :100%;
  height:100%;
  padding-top:30px;
  }
  
  
  #app{
  text-align:center;
  }
  
  .navbar-light{
  
  background-color: #167bff;
  box-shadow:0px 14px 80px rgba (34,35,58,0.2);
  
  }
  
  
  .custom-control-label{
  font-weight:100;
  }
  
  .forgot-password, .forgot-password a{
  text-align : right;
  font-size : 13px;
  padding-top:10px;
  color:#7f7d7d;
  margin:0;
  }
  .forgot-password a{
   color:#167bff;
  }
  &lt;/style&gt;
  </code></pre>
  <p>Nav.vue</p>
  <pre><code>&lt;template&gt;
      &lt;nav class=&quot;navbar navbar-expand navbar-light fixed-top&quot;&gt; 
  
    &lt;div class=&quot;container&quot;&gt;
  
    &lt;router-link to=&quot;/&quot; class=&quot;navbar-brand&quot; &gt; Test Data Generator &lt;/router-link&gt;
  
      &lt;div class=&quot;collapse navbar-collapse&quot;&gt;
        &lt;ul class=&quot;navbar-nav ml-auto&quot;&gt;
    
  
  
          &lt;li class=&quot;nav-item&quot; v-if=&quot;isLoggedIn==null&quot;&gt; 
            &lt;router-link to=&quot;/login&quot; class=&quot;nav-link&quot;&gt; Login  &lt;/router-link&gt;
          &lt;/li&gt;
           &lt;li class=&quot;nav-item&quot; v-else &gt; 
           &lt;router-link @click=&quot;handleLogout&quot; class=&quot;nav-link&quot;&gt; Logout   &lt;/router-link&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
  
      &lt;/div&gt;
  
  
    &lt;/div&gt;
  
  
  &lt;/nav&gt;
  &lt;/template&gt;
  
  
  &lt;script&gt;
  export default {
    name:'Nav',
  
    computed: {
     isLoggedIn() {
      return window.localStorage.getItem(&quot;userId&quot;);
    }
  },
    methods:{
  
          handleLogout(){
              localStorage.removeItem('userId');
              this.$router.push('/login');
            }
          }
    }
  
  &lt;/script&gt;
  
   &lt;style&gt;
        nav .navbar-nav   li a{
    color: white !important;
    }
    &lt;/style&gt;
  </code></pre>
  <p>Login.vue</p>
  <pre><code>&lt;template&gt;
  &lt;div class=&quot;auth-wrapper&quot;&gt;
    &lt;div class=&quot;auth-inner&quot;&gt;
      &lt;h4&gt;Login&lt;/h4&gt;
  
      
          &lt;p&gt;
          &lt;label&gt;Username&lt;/label&gt;
          &lt;input type=&quot;text&quot;  v-model=&quot;state.username&quot; placeholder=&quot;Username&quot; class=&quot;form-control&quot;/&gt;
              
          &lt;/p&gt;
     
  
          &lt;p&gt;
          &lt;label&gt;Password&lt;/label&gt;
          &lt;input type=&quot;password&quot; class=&quot;form-control&quot;  v-model=&quot;state.password&quot;  placeholder=&quot;Password&quot;/&gt;
              
          &lt;/p&gt;
  
          &lt;button @click=&quot;handleLogin&quot;  class=&quot;btn btn-primary btn-block&quot;&gt;Login&lt;/button&gt;
    
         &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/template&gt;
  
  
  
  &lt;script&gt;
  
  import { required } from '@vuelidate/validators'
  import useValidate from '@vuelidate/core'
  import axios from 'axios'
  import { apiHost } from '../config'
  import {reactive, computed} from 'vue'
  
  export default {
      name:'Login',
      setup() {
          const state = reactive({
              username:'',
              password:'',
          })
  
          const rules=computed(() =&gt; {
                   return {
                  username: { required },
                  password: { required },
          }
      })
      
      const v$ =  useValidate(rules,state)
  
          return{
              state,v$,
          }
   },
  
  
     
      methods:{
  
        async  handleLogin(){
              this.v$.$validate()
              if (!this.v$.$error) {
              const loginURL=apiHost+'authenticate';
              const response = await axios.post(loginURL,{
                      username:this.state.username,
                      password: this.state.password
              });
              console.log(response);
              localStorage.setItem('userId',response.data.userId);
              this.$router.push('/hello');
            }else{
                alert('Please enter username and password.')
            }
          }
      }
  }
  &lt;/script&gt;
  
  &lt;style&gt;
  .auth-wrapper{
  display:flex;
  justify-content:center;
  flex-direction:column;
  text-align:left;
  
  }
  
  
  .auth-inner{
  
  width:300px;
  margin :auto;
  background: #167bff;
  box-shadow:0px 14px 80px rgba (34,35,58,0.2);
  padding:40px 55px 45px 55px;
  border-radius:15px;
  transition: all .3s; 
  }
  .auth-wrapper .form-control:focus{
  border-color:#167bff;
  box-shadow:none;
  }
  
  
  .auth-wrapper h4{
  text-align:center;
  margin:0;
  line-height:1;
  padding-bottom:20px;
  
  }
  
  &lt;/style&gt;
  </code></pre>
  <p>main.js</p>
  <pre><code>import { createApp } from 'vue'
  import { createRouter, createWebHistory } from 'vue-router'
  import App from './App.vue'
  import Login from './components/Login.vue'
   import Home from './components/Home.vue'
   import States from './components/States.vue'
   import HelloWorld from './components/HelloWorld.vue'
  import Toaster from '@meforma/vue-toaster';
  
  const router = createRouter({
      history: createWebHistory(),
      routes:[
         
          {
              path : '/login',
              component:Login
          },
          {
              path : '/getStates',
              component:States
          },
          {
              path : '/',
              component:Home
          },
  
          {
              path : '/hello',
              component:HelloWorld
          },
  
    
  
  ]
  })
  
  const app= createApp(App);
  app.use(router).use(Toaster).mount('#app')
  </code></pre>
  <p>Image Link for the changes suggested by Keenal.</p>
  <p><a href="https://drive.google.com/file/d/1_EOJTM2HhJnAYjBJCaSobA2i2LS-cOww/view?usp=sharing" rel="nofollow noreferrer">https://drive.google.com/file/d/1_EOJTM2HhJnAYjBJCaSobA2i2LS-cOww/view?usp=sharing</a></p>