How to access vue router in Vuex store module actions with Quasar framework?

Question

I am using

• Quasar Framework v2 Beta
• Vue 3 Composition Api
• Vuex 4
• Typescript

My problem:

When I import router and try to redirect User in Vuex store module actions.ts using Router.push('/') it shows me an error => Property 'push' does not exist on type 'RouteCallback<StateInterface>'

actions.ts

import { ActionTree } from 'vuex'
import { StateInterface } from '../index'
import { LoginResponseInterface } from './state'
import { api } from 'boot/axios'
import { Cookies } from 'quasar'
import Router  from '../../router'
const actions: ActionTree<LoginResponseInterface, StateInterface> = {
  UserLogin({commit}, formData){
    api.post('auth/login', formData)
    .then(response => {
      var user = {firstName: response.data.firstName, lastName: response.data.lastName, phoneNumber: response.data.phoneNumber}
      commit('setUserDetails', {token: response.data.token, user})
      Cookies.set('auth_token', response.data.token)
      Router.push('/') //`Property 'push' does not exist on type 'RouteCallback<StateInterface>'`
    })
  }
}

export default actions

router/index.ts

import { route } from 'quasar/wrappers'
import {
  createMemoryHistory,
  createRouter,
  createWebHashHistory,
  createWebHistory
} from 'vue-router'
import { StateInterface } from '../store'
import routes from './routes'

/*
 * If not building with SSR mode, you can
 * directly export the Router instantiation;
 *
 * The function below can be async too; either use
 * async/await or return a Promise which resolves
 * with the Router instance.
 */

export default route<StateInterface>(function ({ store, /* ssrContext */ } ) {
  const createHistory =
    process.env.SERVER
      ? createMemoryHistory
      : process.env.VUE_ROUTER_MODE === 'history'
        ? createWebHistory
        : createWebHashHistory

  const Router = createRouter({
    scrollBehavior: () => ({ left: 0, top: 0 }),
    routes,

    // Leave this as is and make changes in quasar.conf.js instead!
    // quasar.conf.js -> build -> vueRouterMode
    // quasar.conf.js -> build -> publicPath
    history: createHistory(
      process.env.MODE === 'ssr' ? void 0 : process.env.VUE_ROUTER_BASE
    )
  })
 

  return Router
})

Answer 1

import { useRouter, useRoute } from 'vue-router'

Global declaration

const Router = useRouter();
const Route = useRoute();

To use the router in action

Router.push('/');

Answer 2

the problem is because of "route" wrapper which using by default in Quasar. The same trouble exists with store. I'm not sure is this wrapper required but without it all works pretty well. I just removing those wrappers and exporting directly Router object like in example below.

src/router/index.js

import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'
import routes from './routes'

const createHistory = process.env.VUE_ROUTER_MODE === 'history' ? createWebHistory : createWebHashHistory

export default createRouter({
  scrollBehavior: () => ({
    left: 0,
    top: 0
  }),
  routes,

  history: createHistory(process.env.VUE_ROUTER_BASE)
})

BTW, doing the same with store, works fine.