fix: routing is not working & ionicons not importing correctly

🐛 The bug

routing is absolutely broken with me, in addition to the issue that nothing works unless i install @ionic/vue and icons are not importing correctly

icons error:

what happens when I change tabs:

as you can see the tabs just get displayed together

if I change tabs again this comes in the console:

app.vue:

<template lang="pug">
ionApp
  UiTabs
</template>

components/Ui/Tabs.vue:

<template lang="pug">
ionPage
   ionTabs
      ionRouterOutlet
      //- https://ionicframework.com/docs/vue/navigation#working-with-tabs
      ionTabBar(slot="bottom")
         ionTabButton(tab="home" href="/tabs/home")
            ionIcon( :icon="ioniconsHome" )
            ionLabel Home
         ionTabButton(tab="schedule" href="/tabs/schedule")
            ionIcon( :icon="ioniconsCalendar" )
            ionLabel Schedule
</template>

pages/tabs/Home.vue

<template lang="pug">
h1 this is the home tab
</template>

pages/tabs/Schedule.vue

<template lang="pug">
h1 this is the schedule tab
</template>

🛠️ To reproduce

https://github.com/NyllRE/ionic-nuxt-3

🌈 Expected behaviour

• tabs change correctly
• icons get imported and displayed

ℹ️ Additional context

I tried to remake the project multiple times and these errors keep coming, I install @nuxtjs/ionic and no component is known, I install @ionic/vue and the routing is broken, I install @ionic/vue-routing and the ionicons are not working and the routing is broken. nothing seems to be working fine with my experience

[Lexpeartha]

Hey @NyllRE, I’ve created NyllRE/ionic-nuxt-3#1 which hopefully resolves your issues.

Firstly, it seems that using pug didn’t properly work with ionic (might be related to nuxt/framework#6049). After externalizing vue dependencies it seems to work alright (cc @danielroe would appreciate if you could take a look, since this might hint at some bigger underlying issue)

Secondly I think you forgot to put IonPage and IonContent in your pages, as official ionic docs mention

Let me know if you need further assistance or If I can close the issue 😁

[NyllRE]

I forgot to mention an important detail, building the app and serving it works fine, the issue is specifically with running it in a dev environment npm run dev, so this could be an issue with the bundler not working properly