I am currently working on a project in Nuxt 2.17.2 that is entirely written in JavaScript, but now I need to integrate some SDKs that are written in TypeScript.
My goal is to configure the project in a way that allows me to seamlessly run both TypeScript and JavaScript without interfering with the existing codebase. How can I achieve this?
To test this setup, I am attempting to inject a simple function (via plugins) with a *.ts extension, following the guidelines provided in .
Here is what I have implemented so far:
src/plugins/myInjectedFunction.tsimport Vue from 'vue'
declare module 'vue/types/vue' {
interface Vue {
$myInjectedFunction(message: string): void
}
}
Vue.prototype.$myInjectedFunction = (message: string) => console.log(message)
myInjectedFunctionTest.vue
<template>
<div>
<button @click="$myInjectedFunction('Test')">Click me !</button>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
mounted () {
this.$myInjectedFunction('works in mounted')
}
})
</script>
vue-shim.d.ts
declare module "*.vue" {
import Vue from 'vue'
export default Vue
}
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": ".",
"paths": {
"~/*": [
"./*"
],
"@/*": [
"./*"
]
},
"types": [
"@nuxt/types",
"@nuxt/typescript-build",
"@types/node"
]
},
"exclude": [
"node_modules"
]
}
However, when running this configuration, I encounter the error:
TypeError: this.$myInjectedFunction is not a function
at VueComponent.mounted (myInjectedFunction.vue:6:1)
at invokeWithErrorHandling (vue.runtime.esm.js:3017:1)
at callHook$1 (vue.runtime.esm.js:4032:1)
at Object.insert (vue.runtime.esm.js:4427:1)
at invokeInsertHook (vue.runtime.esm.js:6946:1)
at Vue.patch [as __patch__] (vue.runtime.esm.js:7094:1)
at Vue._update (vue.runtime.esm.js:3765:1)
at Vue.updateComponent (vue.runtime.esm.js:3868:1)
at Watcher.get (vue.runtime.esm.js:3446:1)
at new Watcher (vue.runtime.esm.js:3436:1)
What could be missing or incorrect in my implementation?