title: How to register Additional Hooks in a NuxtJs project with Vue Class Component
body: <p>I am building my first <a href="https://nuxtjs.org/" rel="nofollow noreferrer">NuxtJs</a> project and I am also using <a href="https://class-component.vuejs.org/" rel="nofollow noreferrer">Vue Class Component</a> to write my components as classes.</p>
  <p>I am facing trouble in accessing the <code>beforeRouteEnter</code> component hook after applying Vue Class Component (it doesn't get called anymore). So I found the documentation about registering <a href="https://class-component.vuejs.org/guide/additional-hooks.html" rel="nofollow noreferrer">aditional hooks</a> when using this library, but I couldn't figure it out where to place the import statement in my NuxtJs structure.</p>
  <p>I have this file (the same from docs):</p>
  <pre class="lang-js prettyprint-override"><code>// class-component-hooks.js
  import Component from 'vue-class-component'
  
  // Register the router hooks with their names
  Component.registerHooks([
    'beforeRouteEnter',
    'beforeRouteLeave',
    'beforeRouteUpdate'
  ])
  </code></pre>
  <p>And I would appreciate some help on how to set it in my NuxtJs project:</p>
  <pre class="lang-js prettyprint-override"><code>// Where should I place this?
  import './class-component-hooks'
  </code></pre>