The Vue instance seems to be unable to recognize the shims-vue.d.ts file

Question

The Vue instance seems to be unable to recognize the shims-vue.d.ts file

I encountered an issue with my Vue file. Here is the code snippet:

import Vue from 'vue';
import VueRouter from 'vue-router';

export default Vue.extend({
  name: 'MyComponentsName',
  methods: {
    doRedirect() {
      this.$router.push({ name: 'another-route' });
    },
  },
});

In addition, I have a shims-vue.d.ts file:

declare module '*.vue' {
  import Vue from 'vue';
  export default Vue;
}

declare module 'vue/types/vue' {
  import VueRouter from 'vue-router';

  interface VueConstructor {
    $router: VueRouter;
  }

  interface Vue {
    $router: VueRouter;
  }
}

An error message stating:

Property '$router' does not exist on type 'CombinedVueInstance<Vue, ...>

keeps popping up.

I believe that my shims should define what $router is, but it seems like it's not working as intended. The only workaround I've found so far is using

((this as any).$router as VueRouter).push()

, which doesn't feel ideal...

Is there a way to resolve this warning?

typescript vue.js vuejs2 typescript-definitions

Answer 1

Answer №1

It is advisable not to manually augment vue-router if you are already using it.

However, the following code snippet should be used for extending Vue properties:


import Vue from 'vue'

declare module '*.vue' {
  export default Vue
}

declare module 'vue/types/vue' {
  interface Vue {
    $property1: number;
  }
}

This is the correct way to extend Vue properties in a safe manner.

Answer 2

It is advisable not to manually augment vue-router if you are already using it.

However, the following code snippet should be used for extending Vue properties:


import Vue from 'vue'

declare module '*.vue' {
  export default Vue
}

declare module 'vue/types/vue' {
  interface Vue {
    $property1: number;
  }
}

This is the correct way to extend Vue properties in a safe manner.

The Vue instance seems to be unable to recognize the shims-vue.d.ts file

Answer №1

Similar questions

Extract latitude and longitude data using Mapbox's autocomplete feature

Mastering universal code creation with the composition API in Quasar

Switch out the image for a placeholder whenever the src is updated

Integrating a Vue application with an OpenId provider using the OpenId Connect library

The Vue.js application is experiencing issues with the v-for functionality

Integrate AJAX into Framework7 and Vue for enhanced functionality

Trouble displaying data in Vue Laravel retrieved from method

A guide on how to follow a specific item in an Angular 2 store

Issue with detecting errors in Angular unit test when using jest throwError method

Upon transitioning between router pages, an error message pops up saying "Vue Socket.io-Extended: this.$socket.$subscribe is not a

Vue 2 inline event handlers accept two arguments in the template

Stop Toast from closing when Modal is closed in BootstrapVue

My pure JS component is not being recognized by ASP.NET Core when integrated with Vue.js

Enhancing Vue.js functionality with v-model for seamless global data access

Navigating through sections in NextJS-14: Utilizing useRef for seamless scrolling

Modify the standard localStorage format

What is a more definitive way to define a variable other than using const?

Can the v-for props be successfully transferred to a component that is slotted into the HTML? Unfortunately, the slot props are not functioning as expected

Is there a way to check if a date of birth is valid using Regular Expression (RegExp) within a react form?

Leverage the power of ssh2-promise in NodeJS to run Linux commands on a remote server