Nuxt i18n: Using `nuxtI18nHead` in TypeScript

Question

I'm struggling with nuxtI18nHead and TypeScript, what should I do to avoid this error?

The below is from default.vue

Code:

import MainNavbar from '~/components/MainNavbar.vue'

export default {
  components: { MainNavbar },
  head (): any {
    return this.$nuxtI18nHead({ addSeoAttributes: true })
  }
}

Error:

 ERROR  ERROR in layouts/default.vue:18:17                                                                                                                                                 21:34:24
TS2339: Property '$nuxtI18nHead' does not exist on type '{ components: { MainNavbar: ExtendedVue<Vue, unknown, unknown, unknown, Record<never, any>>; }; head(): any; }'.
    16 |   components: { MainNavbar },
    17 |   head (): any {
  > 18 |     return this.$nuxtI18nHead({ addSeoAttributes: true })
       |                 ^^^^^^^^^^^^^
    19 |   }
    20 | }
    21 |

Answer 1

I resolved the issue by using Vue.extend({}), for some reason I thought you weren't allowed to use that in the default.vue file.

import Vue from 'vue'
import MainNavbar from '~/components/MainNavbar.vue'

export default Vue.extend({
  components: { MainNavbar },
  head (): any {
    return this.$nuxtI18nHead({ addSeoAttributes: true })
  }
})

Thanks @Kapcash for the help!