[Vue Vite] Issue with rendering PageTwo using defineComponent in IonNav

Ionic Framework
1

Hey guys!!

I am utilizing Vue alongside Ionic and employing ion-nav for navigation between pages outside the router as per the documentation (ion-nav: Nav View Component for Ionic Framework Apps). I have followed the tutorial and everything works as expected until I attempt to define PageTwo using defineComponent from Vue directly within PageOne.vue, instead of creating a separate file for the component.

Here’s a snippet of my code in PageOne.vue:

<template>
  <!-- ... rest of the template -->
  <ion-nav-link
    router-direction="forward"
    :component="component"
  >
    <ion-button>Go to Page Two</ion-button>
  </ion-nav-link>
</template>

<script lang="ts">
// ... imports
export default {
  data() {
    const PageTwo = defineComponent(() => `<h1>Page two</h1>`);
    return {
      component: markRaw(PageTwo)
    };
  },
};
</script>

The issue arises when navigating from PageOne to PageTwo - the exit animation for PageOne executes correctly, but PageTwo doesn’t render at all.

I’ve created a minimal reproduction repository to demonstrate the issue: https://github.com/onmax/ionic-ion-nav-bug-vue/blob/872d954a04959790f894e96a7fc8bfb5dbe08ad6/src/components/PageOne.vue

I am seeking assistance to resolve this rendering problem. Any insights or suggestions would be highly appreciated! Thanks :pray:

1 Like
2

I am having the same issue, also on web. It’s working from time to time but only on dev.

3

If you open the dev tools you should see an error that says something like

Component provided template option but runtime compilation is not supported in this build of Vue. Configure your bundler to alias “vue” to “vue/dist/vue.esm-bundler.js”.

If you open the vite.config.ts file and change

alias: {
    '@': path.resolve(__dirname, './src'),
},

to

alias: {
    '@': path.resolve(__dirname, './src'),
    vue: 'vue/dist/vue.esm-bundler.js',
},

as the warning is telling you to, it should work