Nuxt.js: After the page is changed does has a hook in the layout to listen？

Created on 9 Mar 2018 · 5Comments · Source: nuxt/nuxt.js

Is there a hook in the layouts to listen after each page change？I want to do something after each page loaded and listen in the layouts

_{This question is available on Nuxt.js community (#c2578)}

Source

HadiChen

👍1

Most helpful comment

You could use a middleware to execute some function before each page is rendered: https://nuxtjs.org/guide/routing#middleware

Another way would be to watch the $route property in your layout:

// layout/default.vue
export default {
  watch: {
    $route () {
      console.log('route changed', this.$route)
    }
  },
}

paulgv on 9 Mar 2018

👍4

All 5 comments

You could use a middleware to execute some function before each page is rendered: https://nuxtjs.org/guide/routing#middleware

Another way would be to watch the $route property in your layout:

// layout/default.vue
export default {
  watch: {
    $route () {
      console.log('route changed', this.$route)
    }
  },
}

paulgv on 9 Mar 2018

👍4

I search the same but not when the route change, rather after the page is rendered.
I did not find anything in doc or forum ...
I need this because i need to apply css class according to the current page in order to apply different style.
So i need to apply these class just when the dom is rendered.

Any idea ?

usb248 on 21 Jun 2018

@usb248 you could add some logic to your pages mounted hook to do this.
If you still have this issue, I'd recommend you open another thread as this is unrelated to the original issue.
Closing this now as there was no more follow up by the original poster.

paulgv on 12 Aug 2018

This question has been resolved by @paulgv, see answer.