Watchouts
This page aims to succinctly mention things to watch out for when building your Nuxt-powered Ionic application, particularly for those familiar with regular Nuxt and Vue applications.
Pages and Navigation
<NuxtPage>, <NuxtLayout> or <NuxtLink>. These are currently not integrated with this module.Instead, Ionic expects <ion-router-outlet> to show the route component, and useIonRouter() or the router-link property on any ion- component to change page.
<template>
<ion-app>
<ion-router-outlet />
</ion-app>
</template>
<ion-page>.This is required by Ionic to set up page transitions and stack navigation. Each view that is navigated to using the router must include an
route.params from the auto-imported useRoute() will always be an empty object.A current workaround is to import { useRoute } from 'vue-router';.
Lifecycle Hooks
Ionic handles lifecycle events slightly differently to Vue, as it persists some components in the DOM when Vue would usually unmount them.
This means the various mounted hooks, e.g. onBeforeMount, may not be called when you would expect them to.
To help with this, Ionic has added extra lifecycle hooks which behave how you may have expected the mounted hooks to behave.
Because of this, some expected functionality from Nuxt or other modules may not work or may require changes to get functioning:
useHead() will not work out of the box.See our cookbook page for how to continue using
useHead()This includes
<keep-alive>, <transition>, and <router-view> - read more here.No serverside rendering
When targeting iOS or Android devices, the build must be able to run completely on the clientside. We discuss solutions for if you're targeting both web and device here.