Different behavior of lifecycle hooks between Vue and Nuxt

Question

I have two pages foo and bar, I print a message to the console when each of the hooks works. In vue it's one order, in nuxt it's another

Vue:

enter /foo

beforeCreate
created
beforeMount
mounted

switch /foo to /bar

beforeCreate
created
beforeMount
beforeDestroy
destroyed
mounted 

Nuxt:

enter /foo

beforeCreate
created
beforeMount 
mounted

switch /foo to /bar

beforeDestroy
destroyed
beforeCreate
created
beforeMount
mounted

When there is a transition to /foo, then in vue/nuxt the hooks fire in the same order, but if you switch from route to route, then the order will change. Why is this happening? Maybe I’m doing something wrong?

Sandbox Vue
Sandbox Nuxt

Answer 1

The default transition mode of Nuxt is

export default {
  transition: {
    mode: 'out-in'
  }
}

try changing it to

export default {
  transition: {
    mode: 'in-out'
  }
}