Search code examples
nuxt.jsbulmabuefy

How to use nuxt-link tag in Buefy?

In Buefy navBar component item element have

<b-navbar-item href="/job">
            job
</b-navbar-item>

It render standart a html tag. When clicked, page reloaded. I want use nuxt-link Nuxt tag whithout reloading page.

This code works, but i got broken css design Bulma navbar.

<b-navbar-item >
    <nuxt-link to="/job">
        Job
    </nuxt-link>
</b-navbar-item>
Solution

  • Two ways:

    1. Don't use buefy navbar, just class:
    <nuxt-link to="/job" class="navbar-item">
    Job
</nuxt-link>
    1. Use tag:
    <b-navbar-item tag="nuxt-link" to="/job">
    job
</b-navbar-item>

    See https://buefy.org/documentation/navbar#api-view