Currently, I am in the process of converting a Nuxt Vue.js project (v2 not v3) into TypeScript, and I'm facing an issue where plugins are not recognized inside .vue files but work perfectly in .ts files.
In the code snippets below, you can see that even bootstrap vue and i18n are not recognized within .vue script tags, only functioning in .ts files. The workaround I found is to create a function that utilizes these plugins inside mixin.ts files and extend them accordingly. Alternatively, importing all plugins manually into each script also works. However, these methods defeat the purpose of global plugins. Am I missing something here? Why aren't they recognized by default?
I've also attempted to extend Vue directly in the main .vue components instead of using a mixin, but the same recognition issue persists.
Component.vue
<template>
...
<div>
{{$testFunction('test')}} Although this works, it lacks 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"
]
}