Problems with IonicVueRouter opening safari instead of routing

Ionic Framework Ionic Vue
1

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 https://www.youtube.com/watch?v=mQ4zmFy4d7Y 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.

IMG_4789
IMG_4789828×1792 87.1 KB
IMG_4790
IMG_4790828×1792 76.8 KB

2

a watch my videos… they are better :rofl:

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

3 
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),
	routes,
})

export default router

Here is the router index.js

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

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

export default {
    data(){
        return {
            memories: {"m1": "MAX", "m2": "JACK", "m3": "JENNY", "m4": "JOHN", "m5": "JJ", "m6": "MY"}
        }
    },
    
    components: {
        IonList,
        IonItem
    }
}
</script>

And here is where i use the router-link

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

Here is where the router-link links to

4

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

5

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.

<template>
    <ion-page>
        <ion-header
            translucent
            collapse="condense"
            class="ion-safe-area-top"
        >
            <ion-toolbar>
                <ion-buttons slot="start">
                    <ion-back-button :default-href="defaultPage"></ion-back-button>    
                </ion-buttons>   

                <ion-title >
                    {{ pageTitle }}
                </ion-title>
            </ion-toolbar>   
        </ion-header>
        <ion-content>
            <slot />
        </ion-content>
    </ion-page>
</template>

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

export default {
    props: [
        "pageTitle",
        "defaultPage"
    ],
    components: {
        IonPage,
        IonHeader,
        IonTitle,
        IonContent,
        IonToolbar,
        IonBackButton,
        IonButtons
    }
    
}
</script>

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

6

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

7

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:

Angular: https://ionicframework.com/docs/angular/pwa
React: https://ionicframework.com/docs/react/pwa
Vue: https://ionicframework.com/docs/vue/pwa

2 Likes