Customising app.vue

This module provides a default app.vue file for when one is not otherwise provided by your app.

If you need to customize this app.vue file, you can create a new one in your project's source directory, based off the default:

app.vue
<template>
  <ion-app>
    <ion-router-outlet />
  </ion-app>
</template>

This module will then stop providing one, so that your project's app.vue is used instead.

Necessary ion tags

It's necessary that <ion-app> and <ion-router-outlet> are provided in your app.vue for Ionic to function.

<ion-app> is the container element of Ionic - there should be only one per project - and is required for certain behaviours to work. Please see the Ionic ion-app documentation for more info.

Equally, <ion-router-outlet> provides a mounting point for the route component. In regular Nuxt applications, this would be <NuxtPage />, but as Ionic Router is handling our routing we must use the <ion-router-outlet>.

Remember that app.vue acts as the main component of your Nuxt application. Anything you add to it (JS and CSS) will be global and included in every page. Read more about app.vue in the Nuxt app.vue docs.
Edit this page on GitHub