I've created a plugin and want to use it inside one of my components.
The code from the plugin located under ~/plugins/socket.client.ts
:
import { io } from 'socket.io-client'
import { Plugin } from '@nuxt/types'
const socketIOPlugin: Plugin = (_, inject) => {
const socketUrl: string | undefined = process.env.socket_url
if (!socketUrl || socketUrl.length <= 0) {
throw new Error('socketUrl is undefined.')
}
const socket = io(socketUrl)
inject('socket', socket)
}
export default socketIOPlugin
It is registered inside the nuxt.config.js.
plugins: ['~/plugins/socket.client']
And I use it inside my component like this:
import Vue from 'vue'
export default Vue.extend({
mounted() {
this.$socket.on("example:hello", (data: any) => {
console.log(data);
});
},
})
However, when I start nuxt, I get the following error:
Property '$socket' does not exist on type 'CombinedVueInstance<Vue, unknown, unknown, unknown, Readonly<Record<never, any>>>'.
I've already tried adding a vue-shim.d.ts file, but still nothing changes.
declare module "*.vue" {
import Vue from 'vue'
export default Vue
}
declare module "vue/types/vue" {
import { Socket } from "socket.io-client";
interface Vue {
$socket: Socket;
}
}
I can't seem to find a way to solve this. Can anyone please help me?