fix: routing is not working & ionicons not importing correctly

[NyllRE]

🐛 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/nuxt.js#14366). 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 😁

[Lexpeartha]

also you don't need IonPage in your UiTabs.vue component

[NyllRE]

thanks a lot @Lexpeartha for your help, but unfortunately after I tried all of what you did the same errors persist

• converted everything into html instead of pug
• made sure I follow the documentation structure with placing the components
• reinstalled everything just to make sure
• switched to yarn instead of pnpm and for some reason the ionicons worked but the routing is still broken

I will be using ionic with plain vue until these errors get fixed because they seriously broke the developer experience. if there's anything I could do to help I'd be happy to because I'm really looking forward to making full stack web and mobile apps with backend and all only using nuxt

[Lexpeartha]

Hmm, have you tried out my PR?

If It still doesn't work, I would appreciate a reproduction

[NyllRE]

I did try your pr and I even added to it the extra fixes you suggested, is it working with you? because if it does then I will try to restart the project without using pnpm because I feel like most of the issues are from it

[Lexpeartha]

Let me clarify, you tried cloning [my fork] and it still doesn't work?

For me it worked fine, pnpm just threw few warnings and that's about it. If you could provide more context, errors or reproductions I might have something to go off of

[NyllRE]

yep, I did clone your fork & modified the project based on your recommendations. so it seems to be an issue on my side, I don't know what it could be, when I have free time I will send all useful context I could get

[Lexpeartha]

Yes, but my fork needs no modifications I've already added them. Did you try it by itself, without making modifications?

[NyllRE]

here's a video of the issues that happens with me with explainations:

@nuxtjs/ionic issues Video

notes:

• when I re-installed with all the different package managers I did remove the node_packages file
• I tried modifying the installations with removing and adding different packages to make sure nothing is conficting
• I changed the tags from thisCase to this-case and also ThisCase and I discovered that using this-case produces a different error:
  • 

the only issue I could think of is that my Fedora has some weird internal issue that could make this error because I guess you use windows/mac and it works with you. I will test it tomorrow with my windows boot and if the issue doesn't return then the issue could be with fedora or linux specifically even though nuxt and @ionic/vue alone work well. other than that I'd be sticking with @ionic/vue

[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

[NyllRE]

I copied the playground file in this repo and modified it to my needs and it did work. the error from this issue persists