Property '$router' not found when using it as this.$router or this.$route when updating to ionic 8/vite

Ionic Framework
1

Hi everyone, I’m currently updating my project from ionic 7 to ionic 8, capacitor 5 to capacitor 6 and along with that I thought I’d also update to use Vite instead of the vue-cli. I’ve almost got it working except that now when I run vue-tsc && vite build I get the following error even though it was working before:

Property '$router' does not exist on type 'CreateComponentPublicInstanceWithMixins<ToResolvedProps<{}, {}>, {}, {}, {}, { home(): Promise<void>; }, ComponentOptionsMixin, ComponentOptionsMixin, ... 18 more ..., {}>'.

await this.$router.replace({ path: '/home' }) //does not like this.$router

// src/router/index.ts
import { createRouter, createWebHistory } from '@ionic/vue-router'
const routes: Array<RouteRecordRaw> = [] // routes omitted for brevity
const router = createRouter({
  history: createWebHistory(import.meta.env.VITE_BASE_URL),
  routes
})
export default router

Anyone have an idea of what I might’ve missed while updating?

I also created a new Ionic project and copied over the vite.config.ts, tsconfig.json, and tsconfig.node.json

2

What does your vite.config.ts look like?

1 Like
3

My vite.config.ts was copied over from a newly created ionic project. I copied over vite.config.ts, tsconfig.json and tsconfig.node.json.

It turns out I had this declaration in a few files

declare module '@vue/runtime-core' {}

and updating vue-router to 4.4.5 seems to break it. The fix was to use the appropriate method of extending vue

declare module 'vue'{}

Here’s some links to more info on it