16

I try to access router in my typescript class component:

import {Vue} from 'vue-property-decorator'
import Component from 'nuxt-class-component'
import {Getter, Action} from 'vuex-class'

@Component
export default class Login extends Vue {
    @Action login

    username = ''
    password = ''

    async submit () {
        await this.login({username: this.username, password: this.password})
        this.$router.push('/results')
    }
}

Unfortunately, I get:

error TS2339: Property '$router' does not exist on type 'Login'.
Improve this question
3
  • $router may be private in the declaration file, try (<any>this.$router).push('/results'). If that is working, then the declaration file is wrong. Hmm, have you tried "super.$router" as well? It may be protected Commented Sep 8, 2017 at 9:40
  • 1
    Apparently neither work. But this['router'] works. Commented Sep 8, 2017 at 10:20
  • you can try with this (this as any).$router.push() Commented Feb 1, 2020 at 16:34

5 Answers 5

Reset to default
16

Shim the vue file and include $router:

Make a typings file called vue-shim.d.ts

Adjust your shim like this:

import VueRouter, { Route } from 'vue-router'

declare module 'vue/types/vue' {
  interface Vue {
    $router: VueRouter
  }
}

now Vue (in your case -- this) will have a property of $router and typescript won't complain.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

I'd like to know if there' some official documentation about that. Also, is that required for Vue 3 projects, too?
@ShadowGames This post is 3 years old, so the answer above was exclusive to Vue 2.
It help for NUXT 3. Don't forget restart your VSCode after creating vue-shim.d.ts
For Vue3 it looks slightly different. You can check the documentation here: vuejs.org/api/utility-types.html#componentcustomproperties
14

For the ones who are using Vue 3, don't forget to declare your components with defineComponent, otherwise TypeScript won't be able to infer the types:

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  // type inference enabled
})
</script>

Reference: https://v3.vuejs.org/guide/typescript-support.html#defining-vue-components

Improve this answer

Comments

6

Make sure you have the router imported in your main vue file:

import router from './router'

const v = new Vue({
  router,

  render: h => h(App)
}).$mount('#app')

This is how I write my components, but I think it is the same.

  import Vue from 'vue'

  export default Vue.extend({
    name: 'Login'

  })
Improve this answer

1 Comment

The second code block fixes the issue. The original problem was because TS didn't know the exported object was being used within vue.
4

In Vue 3, adding these lines to vite-env.d.ts got rid of the error:

import { Router } from 'vue-router'
declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $router: Router
  }
}
Improve this answer

Comments

1

other answer don't work for me

but the code below works

import Vue from 'vue';

import VueRouter from 'vue-router';

...
  public rowClick(row: object, column: object, event: object): void {
      console.log(row, column, event);
      this.$router.push('/login');
  }
...
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.