Nuxt.js: page transitions

Question

In my nuxt.config.js I added loading: '~/components/LoadingBar.vue'.

After deploying the site my custom page transition works, but only when the first page visited is different from the home page.

For example, if you visit this link and navigate from there to /About, or /Portfolio, you'll see my custom transition (blur effect + loading circle).

Now, click on the logo (my name, above the "Home" menu item): my custom page transition inexplicably resets to default Nuxt page transition, with the white loading bar at the very top of the page.

Not sure if that's a known bug with Nuxt.js, I can't think of anything in my code that could cause something like that. How do I fix it?

Answer 1

The page reloads once you click on the logo,
it seems you are using a simple <a> link instead of <nuxt-link>.

Set a name like this for your home route in router.js

{
    name: 'home',
    path: '/',
    component: Index
}

then <nuxt-link :to="{ name: 'home' }">logo</nuxt-link>