Enregistrez des hooks supplémentaires dans le projet NuxtJs à l'aide des composants de la classe Vue

Question

Je construis mon premier projet NuxtJs et j'utilise également des composants de classe Vue pour écrire mes composants sous forme de classes.

Après avoir appliqué un composant de classe Vue, j'ai des problèmes pour accéder aux hooks du composant beforeRouteEnter (qui ne sont plus appelés). J'ai donc trouvé de la documentation sur l'enregistrement de hooks supplémentaires lors de l'utilisation de cette bibliothèque, mais je n'arrive pas à savoir où placer l'instruction import dans la structure NuxtJs.

J'ai ce fichier (identique à la documentation) :

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

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

Et j'aimerais de l'aide pour le configurer dans mon projet NuxtJs :

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

Answer 1

Le résultat est très simple :

J'ai placé le fichier .js dans le dossier plugins :

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

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

Puis dans mon nuxt.config.jsfichier j'ai placé cette ligne :

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