Typescript: head() hook not working for typescript page class

Created on 2 May 2019 · 4Comments · Source: nuxt/typescript

Version

v2.6.3

Reproduction link

Steps to reproduce

I am using nuxt + typescript and am trying to get a dynamic page title to work using the head() function in my class, based on some asyncData I pull from an API. It doesn't seem to be called at all atm. It does work when I put the head() function in my component decorator, but in that case I cannot use the asyncData() using the this context

Reproduce in the sandbox at https://9390o40nn4.sse.codesandbox.io/some-page for example

What is expected ?

The page title will be set

What is actually happening?

It's not being set ;)

_{This bug report is available on Nuxt community (#c9145)}

transfered

Source

FreekVR

Most helpful comment

Fixed this myself, but might be good to add this kind of thing as an example to the docs?

You have to pass the this scope to the head function and add it to the component decorator.

Like this:

// The @Component decorator indicates the class is a Vue component
@Component({
    asyncData({ params, error }): Promise<any> {
        ...
    },

    head(this: MyPageClass): object {
        return {
            title: this.myAsyncData,
            meta: [
                // hid is used as unique identifier. Do not use `vmid` for it as it will not work
                { hid: 'description', name: 'description', content: 'My custom description' }
            ]
        };
    }
})

class MyPageClass extends Vue {
    myAsyncData?: string
...

FreekVR on 3 May 2019

🎉11 👍8 ❤2 😄2

All 4 comments

Fixed this myself, but might be good to add this kind of thing as an example to the docs?

You have to pass the this scope to the head function and add it to the component decorator.

Like this:

// The @Component decorator indicates the class is a Vue component
@Component({
    asyncData({ params, error }): Promise<any> {
        ...
    },

    head(this: MyPageClass): object {
        return {
            title: this.myAsyncData,
            meta: [
                // hid is used as unique identifier. Do not use `vmid` for it as it will not work
                { hid: 'description', name: 'description', content: 'My custom description' }
            ]
        };
    }
})

class MyPageClass extends Vue {
    myAsyncData?: string
...

FreekVR on 3 May 2019

🎉11 👍8 ❤2 😄2

I was also looking for this. I think it should be in the docs.

Either you put it inside the @Component declaration or you can create a custom @Meta decorator (see this issue: https://github.com/nuxt/vue-meta/issues/181)

clementmas on 4 May 2019

👍3

cc @kevinmarrec

manniL on 8 May 2019

Thanks @clementmas for referencing this issue link !

Well in fact without decorators there are 2 ways to set head in Nuxt + TypeScript :

1) Through component options, as @FreekVR snippet
2) Use Component.registerHooks from vue-class-component to be able to use head method in the class.

It's not sure yet but I'd like to make @nuxt/typescript wrap vue-property-decorator (which depends directly on vue-class-component), in a similar way that does nuxt-property-decorator.

The idea behind this would be to be able to do :

import { Component, Page , Prop, SomeNuxtAwesomeDecorator } from '@nuxt/typescript'

@Component
export default class HomePage extends Page {
  @Prop() property1!: string // 'Prop' decorator from 'vue-property-decorator'
  @SomeNuxtAwesomeDecorator({ param: value }) property2!: Object
}

And we could indeed provide a @Meta decorator for people who wants to use it this way !