Vue instance does not pick up shims-vue.d.ts file

user_74727 0
Viewed 2918

I have a Vue file that looks like this:

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

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

And then in my 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;
  }
}

However, I'm getting the following warning: Property '$router' does not exist on type 'CombinedVueInstance<Vue, ...>

From what I understand, my shims should be telling Vue what $router is, but that doesn't seem to be happening. The only work around I've come up with is using ((this as any).$router as VueRouter).push(), but that seems pretty ugly...

How can I get rid of this warning?

typescript-definitions vuejs2 vue.js typescript
1 Answers

If you are using vue-router you shouldn't be augmenting yourself.

Although 

import Vue from 'vue'

declare module '*.vue' {

  export default Vue
}

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

Should be the correct way of doing so

user_46895580
Related