CODEWITHSUNDEEP
frontendnuxt.js
phame
phame

Reputation: 125

Why does <nuxt-link> overwrites my css in Nuxt.js?

I am getting this issue with Nuxt.

Whenever I use , it automatically rewrites my CSS design and shows it differently. You can see exact issue in the video below.

Video of the issue

If I replace <nuxt-link> with <a>, everything starts to work correctly.

Navbar code example:

  <nav class="navbar navbar-expand-lg navbar-dark mb-5 text-white" style="z-index: 10; background-color: rgba(0,0,0,0.3)">

<nuxt-link to="/" class="navbar-brand" active-class="active">
  Frontend
</nuxt-link>
<button
  class="navbar-toggler"
  type="button"
  data-toggle="collapse"
  data-target="#navbarNav"
  aria-controls="navbarNav"
  aria-expanded="false"
  aria-label="Toggle navigation"
>
  <span class="navbar-toggler-icon" />
</button>
<div id="navbarNav" class="collapse navbar-collapse">

  <ul class="navbar-nav">
    <li class="nav-item active">
      <nuxt-link to="/" class="nav-link" active-class="active">
        Home
      </nuxt-link>
    </li>
    <li class="nav-item">
      <nuxt-link to="/games" class="nav-link" active-class="active">
        Games
      </nuxt-link>
    </li>
  </ul>

Correct css (at the start of the page loading) Correct CSS

Incorrect css (after a few seconds) Incorrect CSS

Upvotes: 0

Views: 1084

Answers (1)

phame
phame

Reputation: 125

Issue was with <style> in index.vue (main page).

Changed it to <style scoped> and the issue is fixed.

Upvotes: 2

Related Questions