Vue & typescript: Global methods are not recognised

Question

I have a Vue mixin like so:

const mixin = Vue.extend({
    methods: {
        $languages: function(): object {
            return {
                en: 'english'
            }
        }
    }
}


Vue.mixin(mixin)
new Vue({
    router,
    render: h => h(Frame)
}).$mount('#app')

... and I'm trying to use it in a component:

<template lang="pug">
    .languages
        a( v-for="language, code in $languages()" :key="code" @click="$root.$i18n.locale = code") {{ language }}&nbsp;
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
    methods: {
        languages: function () {
            console.log(this.$languages)
        }
    }
})
</script>

But I get an error, saying "Property '$languages' does not exist on type 'CombinedVueInstance void; }, unknown, Readonly>>'"

Curiously, if I'm just trying to use it in the template, it works. The language name appears. It's just the typescript code that doesn't recognise the function.

tony19 · Accepted Answer · 2022-07-16 01:08:23Z

1

You need to augment the vue module to provide a typing for $languages, observe:

// vue-shim.d.ts

declare module 'vue/types/vue' {
  interface Vue {
    $languages: LanguageService
  }
}

And a psuedo LanguageService

// language-service.d.ts

export interface LanguageService {
  $languages: () => Record<string, string>
}

You can read more about augmenting Vue here

edited Jul 16, 2022 at 1:08

tony19

140k23 gold badges281 silver badges354 bronze badges

answered May 20, 2020 at 17:00

Ohgodwhy

50.9k11 gold badges86 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Zoltán Matók Over a year ago

Thank you very much @Ohgodwhy. Turns out, it was enough to chuck in the module declaration with '$languages: object' in the same file with my mixin and it starting working.

Zoltán Matók Over a year ago

Correction: $languages: () => {[key: string]: string}

Collectives™ on Stack Overflow

Vue & typescript: Global methods are not recognised

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related