Compatibility with @ionic/vue-router

[reslear]

is there any chance of using with the @ionic/vue-router ?

[posva]

Probably but I haven't used ionic yet. The types part might need extra work. Feel free to report your advances on that here for other users!

[ozgurg]

I attempted to use it, but I couldn't manage it. Replacing @ionic/vue-router with vue-router/auto and <ion-router-outlet /> with <router-view /> breaks Ionic's transitions and other functionalities it provides.

[reslear]

Base on nuxt module by @danielroe, router implementation can be complicated
https://github.com/nuxt-modules/ionic/blob/main/src/runtime/plugins/router.ts

[fcl999]

By using the following method, the first parameter of useIonRouter can receive type hints and route generation.

router/index.ts

/**
 * router/index.ts
 *
 * Automatic routes for `./src/pages/*.vue`
 */

// Composables
import { routes } from "vue-router/auto-routes";
import { createRouter, createWebHistory } from "@ionic/vue-router";

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes,
});

router.d.ts

/**
 * router.d.ts
 */
import { type AnimationBuilder } from "@ionic/vue";
import { type RouteLocationRaw } from "vue-router/auto";
import type { RouteAction } from "@ionic/vue-router/dist/types/types";
import type { RouteDirection } from "@ionic/vue/dist/types/hooks/router";

export interface UseIonRouterResultUseRouteLocationRaw {
  canGoBack: (deep?: number) => boolean;
  push: (
    location: RouteLocationRaw,
    routerAnimation?: AnimationBuilder,
  ) => void;
  replace: (
    location: RouteLocationRaw,
    routerAnimation?: AnimationBuilder,
  ) => void;
  back: (routerAnimation?: AnimationBuilder) => void;
  forward: (routerAnimation?: AnimationBuilder) => void;
  navigate: (
    location: RouteLocationRaw,
    routerDirection?: RouteDirection,
    routerAction?: RouteAction,
    routerAnimation?: AnimationBuilder,
  ) => void;
}

declare module "@ionic/vue" {
  export declare const useIonRouter: () => UseIonRouterResultUseRouteLocationRaw;
}