Tabs and Navigation Disappear When using Web Components

I’m using Vue to developer a PWA. I’ve imported the Ionic v4 web components and have them displayed in the app. However, when changing the route, some components don’t display visibility: hidden;.

Note, I’m not using Ionic Vue (because it’s still in beta), I’ve imported the components as web components instead.

The elements that don’t display don’t have the .hydrated class or they are a child of an element without the .hydrated class.

I’m also not using the ionic router, but Vue router instead. Here’s a sandbox of the app https://codesandbox.io/s/ionic-vue-k7eiv

Anyone any ideas why this might be? Would be really cool to get this working

there were some errors in the way you constructed your menu

1 Like