TypeScript error when using this.$router in actions.ts



  • Hi, great framework!

    I have created a Quasar CLI project (1.9.5) using TypeScript. It all works great, but I’m getting a Typescript error when using

    this.$router

    outside a *.vue file

    e.g.

    this.$router.push(’/myPage’);

    in ./store/module-example/actions.ts file.

    The ERROR is: Property ‘$router’ does not exist on type ‘Store<StoreInterface>’.ts(2339)

    Is it considered an anti-pattern to use router in actions.ts file or how can TypeScript be told about this.$router ?

    Reason for usage in actions.ts file: I am using Firebase onAuthStateChanged. this.$router actually does work, but shows the error in VScode.

    ///actions.ts
    const actions: ActionTree<ExampleStateInterface, StoreInterface> = {
    
      handleAuthStateChanged({ commit }: { commit: any }) {
        
        firebaseAuth.onAuthStateChanged(user => {
          // Is triggered every time user state changes
          if (user) {
            // User is logged in
        
            this.$router.push('myPage');
          } else {
            // User is logged out
            
            this.$route.push('/login');
          }
        });
      }
    };
    


  • Hi! We have solved this in our project with using a shims.d.ts file. It looks like this:

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

    Maybe this will help you.



  • Hey! Im having the same problem, but I would like to know why I cannot just import Router inside actions.ts and use it as I usually did on Javascript files.

    I know that it is something related to the router Quasar wrapper and I am getting really stuck on understanding why is this happening.

    Thank you.