Nuxt/examples/custom-layout

Extending the main app

Nuxt.js allows you to extend the main application by adding a layouts/app.vue file

The default app

The default source code of the main app is:

<template>
  <nuxt-container>
    <nuxt/>
  </nuxt-container>
</template>

The layouts/app.vue file

🎬 Example video

You have to make sure to add the <nuxt-container> and <nuxt> components when extending the app.

It is important that the code you add stays inside <nuxt-container>.

Example:

<template>
  <nuxt-container>
    <div>My navigation bar here</div>
    <nuxt/>
  </nuxt-container>
</template>

Demo

npm install
npm start

Go to http://localhost:3000 and navigate trough the app. Notice how the logo at the top right stays between the pages, even on the error page: http://localhost:3000/404