Problems with IonicVueRouter opening safari instead of routing

Hi, I’ve been trying to debug this for well over an hour and i just can’t seem to find what’s wrong. I’m learning ionic vue by following this tutorial. My main problem is that when i try to use router-link to change pages on my iPhone, router-link opens that page as if it’s an external website and opens it in the iOS in-app safari instead of changing pages like the default vue router is supposed to.

a watch my videos… they are better :rofl:

but honestly, we need to see some code to actually provide any support

import { createRouter, createWebHistory } from "@ionic/vue-router"
import MemoriesPage from "@/pages/MemoriesPage.vue"

const routes = [
		path: "/",
		redirect: "/memories",
		path: "/memories",
		name: "memories",
		component: MemoriesPage,
		path: "/memories/:id",
		component: () => import("@/pages/MemoryDetails.vue"),

const router = createRouter({
	history: createWebHistory(process.env.BASE_URL),

export default router

Here is the router index.js

    <base-layout pageTitle="All Memories">
            <ion-item v-for="memory in memories" :router-link="`/memories/${}`" :key="">
                {{ memory }}

import { IonList, IonItem } from "@ionic/vue"

export default {
        return {
            memories: {"m1": "MAX", "m2": "JACK", "m3": "JENNY", "m4": "JOHN", "m5": "JJ", "m6": "MY"}
    components: {

And here is where i use the router-link

    <base-layout pageTitle="Details" defaultPage="/memories">
        <h2>This is the detail page</h2>

Here is where the router-link links to

whats going on in base-layout ? also can you put it into codesandbox ? or just create a sample project?

I’m quite new to this and im not sure i know how to use code sandbox. But thank you for helping me, i also found your channel and definitely will check it out.

                <ion-buttons slot="start">
                    <ion-back-button :default-href="defaultPage"></ion-back-button>    

                <ion-title >
                    {{ pageTitle }}
            <slot />

import { IonPage, IonHeader, IonTitle, IonContent, IonToolbar, IonBackButton, IonButtons } from "@ionic/vue"

export default {
    props: [
    components: {

base-layout is just a simple template, and i don’t think that code sandbox can pinpoint the problem, because the app works fine on chrome and on safari. The problem arises when i use “add to home screen” and install the PWA on iOS, and then it opens the in app safari instead of changing page

Is there anyway to open the in app-safari like that using ionic vue? If so i can check my project for having accidentally doing that

OP opened a GitHub issue, but I will repost the resolution here for others:

The problem is that their app did not contain a manifest.json file which is required for PWAs to function properly on iOS. We have guides for each framework integration that I recommend reading if you want to add PWA support: