Home

I have simple nav bar in my web app, which works fine when I do not use nuxt, however, I decided to switch to server-side rendering, but nuxt duplicates the first element every time when the page is getting rendered from server. I googled and looked in the documentation but couldn’t find any useful info. Here is the code. Any hint or advice would be appreciated. )

<template lang="html">

<div id="main">
  <nav v-bind:class="active" v-on:click.prevent>
    <a class="home" v-on:click="makeActive('home')"><nuxt-link to='/'>Home</nuxt-link></a>
    <a  class="forum" v-on:click="makeActive('forum')"><nuxt-link to='/forum'>Forum</nuxt-link></a>
    <a  class="blog" v-on:click="makeActive('blog')"><nuxt-link to='/blog'>Blog </nuxt-link></a>
    <a  class="faq" v-on:click="makeActive('faq')"><nuxt-link to='/faq'>FAQ</nuxt-link></a>
  </nav>

</div>
</template>

<script>
export default {
  name: 'header',
  data () {
    return {
      active: 'home'
    }
  },
  methods: {
    makeActive (item) {
      this.active = item
    }
  }
}

</script>