Register additional hooks in NuxtJs project using Vue class components

Question

I'm building my first NuxtJs project and I'm also using Vue class components to write my components as classes.

After applying the Vue class component, I have issues accessing the beforeRouteEnter component hook (it is no longer called). So I found documentation on registering additional hooks when using this library, but I can't figure out where to place the import statement in the NuxtJs structure.

I have this file (same as the documentation):

// class-component-hooks.js
import Component from 'vue-class-component'

// Register the router hooks with their names
Component.registerHooks([
  'beforeRouteEnter',
  'beforeRouteLeave',
  'beforeRouteUpdate'
])

And I'd like help on how to set it up in my NuxtJs project:

// Where should I place this?
import './class-component-hooks'

Answer 1

The result is very simple:

I have placed the .js file into the plugins folder:

// plugins/class-component-hooks.js
import Component from 'vue-class-component'

// Register the router hooks with their names
Component.registerHooks([
  'beforeRouteEnter',
  'beforeRouteLeave',
  'beforeRouteUpdate'
])

Then in my nuxt.config.js file I placed this line:

...
  plugins: [
    { src: "~/plugins/class-component-hooks.js", mode: "client" },
  ],
...