I've been working on this challenge for the past week, and I would appreciate any help or insights from those who may have experience in this area.
Currently, I am in the process of converting vue2-based code to vue3 for a new project. Instead of using the composition API, I am opting for an object-based component approach.
In addition to importing and utilizing external modules written in TypeScript, the components are enclosed within defineComponent().
While everything is functioning correctly, the issue lies with the global mixin implementation. According to the Vue official documentation, mixins written in *.js were traditionally registered as global mixins using app.mixin().
// mixin.js
export default {
methods: {
registerBackButtonCallback() {}
}
}
When attempting to call this.registerBackButtonCallback() in the component file,
'Type 'never' has no call signatures'
error occurs, resulting in compilation failure. However, invoking this.registerBackButtonCallback() functions smoothly when used as a local mixin.
The error exclusively surfaces when the <script lang="ts"> setting is enabled. It compiles without errors only if "strict" or "noImplicitThis" options in "tsconfig.json" are disabled.
Given these circumstances, it appears that the issue is likely related to TypeScript. I considered employing type argumenting and attempted adding it in src/shims-vue.d.ts, similar to the example below, but the error persists.
declare module 'vue/types/vue' {
interface Vue {
registerBackButtonCallback: () => void
}
}
Has anyone encountered challenges when calling methods from a global mixin with the script lang="ts" specified in a vue3 component?
Thank you in advance for any advice or guidance provided.