CODEWITHSUNDEEP
typescriptnuxt.jsnuxt-i18n
Maxim Therrien
Maxim Therrien

Reputation: 133

Nuxt i18n: Using `nuxtI18nHead` in TypeScript

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 |

Upvotes: 1

Views: 1307

Answers (2)

rchl
rchl

Reputation: 146

The best way to handle that is create a global Vue type shim so that it's not necessary to explicitly Vue.extend in all Vue components.

Create a file like types/vue-shim.d.ts with content:

declare module '*.vue' {
    import Vue from 'vue';
    export default Vue;
}

See also https://typescript.nuxtjs.org/guide/setup that documents this and other typescript-related setup steps.

Upvotes: 0

Maxim Therrien
Maxim Therrien

Reputation: 133

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!

Upvotes: 1

Related Questions