The property 'Nuxt plugin' is not recognized in the 'CombinedVueInstance' type

Question

The property 'Nuxt plugin' is not recognized in the 'CombinedVueInstance' type

I have developed a custom plugin and I want to integrate it into one of my components. The code for the plugin is stored in ~/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

The plugin is added to the nuxt.config.js file as follows:

plugins: ['~/plugins/socket.client']

Then, I utilize the plugin in my component like this:

import Vue from 'vue'

export default Vue.extend({
  mounted() {
    this.$socket.on("example:hello", (data: any) => {
      console.log(data);
    });
  },
})

However, upon starting nuxt, I encounter the following error message:

Property '$socket' does not exist on type 'CombinedVueInstance<Vue, unknown, unknown, unknown, Readonly<Record<never, any>>>'.

I've attempted creating a vue-shim.d.ts file without success.

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 am struggling to find a solution to this issue. Can someone please provide assistance?

typescript vue.js nuxt.js

Answer 1

Answer №1

After some code refactoring, I finally managed to get it working.

Important Note: While this solution works for me by enabling usage of the plugin in a different manner, it may not directly address the original question. To achieve the desired outcome, consider modifying the index.d.ts file slightly so that $socket becomes accessible within the Vue components. For more information on this, refer here.

~/plugins/socket.client.ts

import { Plugin } from '@nuxt/types'
import { io, Socket } from 'socket.io-client'

function getSocketConnection(): Socket {
  const socketUrl: string | undefined = process.env.socket_url

  if (!socketUrl || socketUrl.length <= 0) {
    throw new Error('socketUrl is undefined.')
  }

  return io(socketUrl)
}

const socketIOPlugin: Plugin = (_, inject) => {
  inject('socket', getSocketConnection())
}

export default socketIOPlugin
export const socket = getSocketConnection()

I also renamed vue-shim.d.ts to index.d.ts and added the following lines:

import { accessorType } from '~/store'
import { socket } from '~/plugins/socket.client'

declare module 'vuex/types/index' {
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  interface Store<S> {
    $socket: typeof socket
  }
}

declare module 'vue/types/vue' {
  interface Vue {
    $accessor: typeof accessorType
  }
}

declare module '@nuxt/types' {
  interface NuxtAppOptions {
    $accessor: typeof accessorType
  }
}

Instead of directly using the socket.io plugin within components, I've created a store at ~/store/index.ts to handle all socket events.

import type { ActionTree, GetterTree, MutationTree } from 'vuex'
import { getAccessorType } from 'typed-vuex'

export const state = () => ({
  posts: [] as any[],
})

export type RootState = ReturnType<typeof state>

export const getters: GetterTree<RootState, RootState> = {
  posts: (state) => state.posts,
}

export const mutations: MutationTree<RootState> = {
  SET_POSTS: (state: RootState, posts: any[]) => (state.posts = posts),
}

export const actions: ActionTree<RootState, RootState> = {
  fetchPosts({ commit }) {
    this.$socket.emit('example:getPosts')
    this.$socket.once('example:posts', (data: any) => {
      commit('SET_POSTS', data)
    })
  },
}

export const accessorType = getAccessorType({
  state,
  getters,
  mutations,
  actions,
  modules: {},
})

This approach has made usage much simpler and ensured everything updates correctly with Vuex.

~/pages/index.vue

<script lang='ts'>
import { Component, Vue } from 'nuxt-property-decorator'

@Component
export default class Index extends Vue {
  get posts() {
    return this.$accessor.posts
  }

  fetchPosts() {
    this.$accessor.fetchPosts()
  }
}
</script>

To ensure everything functions properly, be sure to install the necessary npm packages listed below:

@nuxt/types
typed-vuex
vue-class-component
nuxt-property-decorator
nuxt-typed-vuex (Don't forget to add this to your nuxt.config.ts buildModules)

Answer 2

After some code refactoring, I finally managed to get it working.

Important Note: While this solution works for me by enabling usage of the plugin in a different manner, it may not directly address the original question. To achieve the desired outcome, consider modifying the index.d.ts file slightly so that $socket becomes accessible within the Vue components. For more information on this, refer here.

~/plugins/socket.client.ts

import { Plugin } from '@nuxt/types'
import { io, Socket } from 'socket.io-client'

function getSocketConnection(): Socket {
  const socketUrl: string | undefined = process.env.socket_url

  if (!socketUrl || socketUrl.length <= 0) {
    throw new Error('socketUrl is undefined.')
  }

  return io(socketUrl)
}

const socketIOPlugin: Plugin = (_, inject) => {
  inject('socket', getSocketConnection())
}

export default socketIOPlugin
export const socket = getSocketConnection()

I also renamed vue-shim.d.ts to index.d.ts and added the following lines:

import { accessorType } from '~/store'
import { socket } from '~/plugins/socket.client'

declare module 'vuex/types/index' {
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  interface Store<S> {
    $socket: typeof socket
  }
}

declare module 'vue/types/vue' {
  interface Vue {
    $accessor: typeof accessorType
  }
}

declare module '@nuxt/types' {
  interface NuxtAppOptions {
    $accessor: typeof accessorType
  }
}

Instead of directly using the socket.io plugin within components, I've created a store at ~/store/index.ts to handle all socket events.

import type { ActionTree, GetterTree, MutationTree } from 'vuex'
import { getAccessorType } from 'typed-vuex'

export const state = () => ({
  posts: [] as any[],
})

export type RootState = ReturnType<typeof state>

export const getters: GetterTree<RootState, RootState> = {
  posts: (state) => state.posts,
}

export const mutations: MutationTree<RootState> = {
  SET_POSTS: (state: RootState, posts: any[]) => (state.posts = posts),
}

export const actions: ActionTree<RootState, RootState> = {
  fetchPosts({ commit }) {
    this.$socket.emit('example:getPosts')
    this.$socket.once('example:posts', (data: any) => {
      commit('SET_POSTS', data)
    })
  },
}

export const accessorType = getAccessorType({
  state,
  getters,
  mutations,
  actions,
  modules: {},
})

This approach has made usage much simpler and ensured everything updates correctly with Vuex.

~/pages/index.vue

<script lang='ts'>
import { Component, Vue } from 'nuxt-property-decorator'

@Component
export default class Index extends Vue {
  get posts() {
    return this.$accessor.posts
  }

  fetchPosts() {
    this.$accessor.fetchPosts()
  }
}
</script>

To ensure everything functions properly, be sure to install the necessary npm packages listed below:

@nuxt/types
typed-vuex
vue-class-component
nuxt-property-decorator
nuxt-typed-vuex (Don't forget to add this to your nuxt.config.ts buildModules)

Answer 3

Answer №2

When creating a module under the declaration of "vue/types/vue"

, it is considered a form of module augmentation. To ensure proper functionality, this code must be placed within a TS file that includes at least one top-level import/export statement (more information can be found here)

Therefore, I recommend transferring this code from vue-shim.d.ts directly into socket.client.ts

Answer 4

When creating a module under the declaration of "vue/types/vue"

, it is considered a form of module augmentation. To ensure proper functionality, this code must be placed within a TS file that includes at least one top-level import/export statement (more information can be found here)

Therefore, I recommend transferring this code from vue-shim.d.ts directly into socket.client.ts

The property 'Nuxt plugin' is not recognized in the 'CombinedVueInstance' type

Answer №1

Answer №2

Similar questions

Can you explain how the functionality of `v-b-modal` and `v-b-toggle` attributes operate and where they are monitored?

Unraveling the Mystery of @Input and @Output Aliases in Angular 2

Function Type Alias with No Particular Name

Cypress Vue Component Test Runner - verifying that clicking a button triggers an event

The V-Model is refusing to be updated

Issue with calling function from props in React is not being resolved

Implementing a onClick event to change the color of individual icons in a group using Angular

Verification of unique custom string

Tips for effectively managing and storing data from a modal in Angular 12 beyond just the ID

How to utilize ngFor for multiple inputs in Angular 4

"Utilizing a Node server in conjunction with the Vue Vite bundler: A comprehensive

I am having trouble retrieving images from the backend API. Can someone assist me in resolving this issue?

VueDraggable: enabling cloning exclusively

Is there a way to showcase the data of each table row within the tr tag in an Angular 8 application?

Can you retrieve the Angular Service Instance beyond the scope of an angular component?

Converting the Angular Material Select Demo Stackblitz into a Self-Contained Component?

Having trouble pushing to an array in Angular typescript? It seems to be returning as undefined

"Maximizing Performance with Vue.js Keep-Alive and Efficient Event Rendering

Can you please explain the process of implementing server-side rendering with React?

Is TypeScript the ultimate solution for function typing?