Vue-class-component: Registering Hooks on Component class

[Fred-JulieDesk]

Hello,

I recently faced an issue with the method

Component.registerHooks([
        'beforeRouteEnter',
    ]);

It was not properly registering my hook.
I digged in the code of your library and found that the method was called after the App component (I'm using vue-cli-3) and thus the hook was not properly registered on the components, causing them to not trigger it.

I was initially doing as you suggest in your README and calling

import { Component } from 'vue-property-decorator';

Component.registerHooks([
    'beforeRouteEnter',
]);

in my main.ts before anything else.

However this did not work because of the reason above.

I found a solution by importing it in the App.vue component before the decorator

@Component

Now the hook is working properly, so if anyone is facing this problem with vue-cli-3 using typescript, here is the solution:

<script lang="ts">
    import { Component, Prop, Vue } from 'vue-property-decorator';
   Component.registerHooks([
        'beforeRouteEnter',
    ]);

    @Component
    export default class App extends Vue {

Happing coding

[ktsn]

Please provide a self-contained repro if you are reporting a bug. Thanks.

[ktsn]

Note I suspect this is the same with a #193

[dragosbodin]

Any updates over here? Still getting this issue with vue-cli 3.

[ktsn]

Closing until reproduction is provided.

[maritaria]

I just had this issue as well. In my project I used webpack to build the project together with babel and the vue loader. I think babel or webpack makes it such that code is executed after all imports have been performed. Because after I put the hook registration in a seperate file and included that before my components (same place the registration code snippet was) then it works.

Perhaps hint in the documentation at importing a seperate file for registering the hooks before having import statements for your components instead of having the hook registration code there itself.

Before (broken)

// Several import statements
import {Component} from 'vue-class-component';
Component.registerHooks(/* ... */);
// Imports, including ones for my app components

After (fixed)

// Several import statements
import 'file-with-registerHooks';
// Imports, including ones for my app components

The imported file contains the same import and function call as the original situation.

[kevlarr]

@maritaria Ah great catch! I wasn't following the docs because I thought I could just put that code into main.ts and that explicit import worked for me as well.