Nuxt Ionic - Weird grey box around the back button, not ios or md look

[nicmar]

I’m trying to build and deploy an app using Nuxt Ionic according to this page: Build and Deploy Mobile Apps with Nuxt Ionic - Ionic Blog

When i first installed Nuxt Ionic, with “npx nuxi init nuxt-ionic-app” and then “npm install @nuxtjs/ionic -D”, and created index.vue and resources.vue, and ran it in Chrome, the UI looked like material design, and the back button was a nice arrow.

But then I added “mode: ‘ios’” to nuxt.config.ts, as I wanted to preview what the ios mode would look like, and the back arrow suddenly looked like a gray box with a small arrow. I changed it to “md”, no difference. Removed it, and still no difference.

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',
  devtools: { enabled: true },
  modules: ["@nuxtjs/ionic"],
  ionic: {
    config: {
      mode: 'ios'
    }
  },
})

My pages are extremely simple, and there is no CSS in them. Below is the code for them.

One thing to point out is that when adding Capacitor and running it in the iOS simulator, it actually looks like correct iOS-styling. But it’s a bit frustrating to work with it in Chrome when it looks so weird.

It almost looks like some kind of accessibility setting or similar, but I can’t find any setting in Chrome. If I run the same page in Safari, the button is white with a gray border, so i don’t even see the text on it…

Thankful for any help!

pages/index.vue

<template>
    <ion-page>
      <ion-header :translucent="true">
        <ion-toolbar>
          <ion-title>Nuxt Ionic</ion-title>
        </ion-toolbar>
      </ion-header>
  
      <ion-content :fullscreen="true">
        <ion-header collapse="condense">
          <ion-toolbar>
            <ion-title size="large">Nuxt Ionic</ion-title>
          </ion-toolbar>
        </ion-header>
        <div id="container">
          <ion-button router-link="/resources">Get Started</ion-button>
        </div>
      </ion-content>
    </ion-page>
  </template>

pages/resources.vue

<template>
  <ion-page>
    <ion-header :translucent="true">
      <ion-toolbar>
        <ion-buttons slot="start">
          <ion-back-button :default-href="'/'" :text="'Resources'"></ion-back-button>
        </ion-buttons>
        <ion-title>Resources</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content :fullscreen="true">
Some text...
    </ion-content>
  </ion-page>
</template>

<script setup lang="ts">
import { useIonRouter, isPlatform } from '@ionic/vue';
import { computed } from 'vue';

const ionRouter = useIonRouter();

</script>

[nicmar]

This is quite odd, i’ve only been working with the design and features of the app, and suddenly the iOS design appeared in my browser. I could even switch between ios and md, and both look correct.

BUT, when sending it to the ios simulator and also my device, now all of a sudden i have a different kind of buttons and icons. Any idea what’s going on and how I get a consistent UI on all devices?

The simulator icons look very weird, and doesn’t show “Back”

The “md” setting works fine in browser:

Even the “ios” setting works on the browser, with the word Back too.