Nuxt Vue Typescript 全局插件在脚本语言 ts 中不可用

Question

I am currently converting a nuxt vue js (v2 not v3) project into typescript and I cannot figure out why plugins do not get recognized inside.vue files, while they work in all.ts files.

As you can see in the code snippets, I also try using bootstrap vue and i18n which are both not recognized inside.vue script tags either, only work in ts files. The only workaround is to create a function that uses them inside the mixin.ts files and extend them that way. Or import all the plugins manually into each script. This kind of defeats the point of global plugins, so is there something I am missing, or why are they not recognized by default?

I also tried extending Vue directly in the main.vue components instead of a mixin, but the same issue is still there.

Component.vue

<template>
  ...
  <div>
    {{$testFunction('test')}} this also works, but does not give any type indication or warnings 
  </div> 
</template

<script lang = "ts">
import Component, { mixins } from 'vue-class-component';
import { TableMixin } from '../../mixins/tablemixin';

@Component
class Contacts extends mixins(TableMixin) {
  test() {
    // Property '$testFunction' does not exist on type 'Contacts'.Vetur(2339)
    console.log(this.$testFunction('test'));
  }
  testMixin() {
    // Works fine through mixin...
    console.log(this.testMixinFunction('test'));
  }
}
export default Contacts;
</script>

mixins/tablemixin.ts

import Vue from 'vue';
import Component from 'vue-class-component';

@Component
export class TableMixin extends Vue { 
  testMixinFunction(str: string) {
    return this.$testFunction(str);
  }
}

plugins/helpers.ts

import Vue from 'vue'

declare module 'vue/types/vue' {
  interface Vue {
    $testFunction(str: string): string;
  }
}

Vue.prototype.$testFunction = (str: string): string => {
    return str + 'tested';
}

nuxt.config.js

plugins: [ 
  '~/plugins/helpers'
]

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2018",
    "module": "ESNext",
    "moduleResolution": "Node",
    "lib": [
      "ESNext",
      "ESNext.AsyncIterable",
      "DOM"
    ],
    "esModuleInterop": true,
    "allowJs": true,
    "sourceMap": true,
    "strict": true,
    "noEmit": true,
    "baseUrl": ".",
    "experimentalDecorators": true,
    "paths": {
      "~/*": [
        "./*"
      ],
      "@/*": [
        "./*"
      ]
    },
    "types": [
      "@types/node",
      "@nuxt/types",
      "nuxt-i18n",
      "bootstrap-vue"
    ]
  },
  "exclude": [
    "node_modules"
  ]
}

Answer 1

Looks like it was just vetur that was complaining. The TS compiler was okay with the global plugins. The project was missing the vetur.config.js, so it was looking in the wrong directory for the ts types (project has client and api). Simply adding it and pointing to the right place fixed the problem for me.

Solution found here: Vetur documentation