Layouts

Along with pages, you can create layouts, which your page can be built from. Templates are great if you find yourself importing the same components over and over again across several of your application’s pages, or if you just have the same UI layout for several of your pages. In other words, you can extend the main layout or create additional pages for your pages to be built on top of.

By default, Nuxt comes with the default.vue layout. This layout is, well, the default layout of your application.

layouts/default.vue

<template>
  <nuxt/>
</template>

Out of the box, the default layout doesn’t do much. In fact, the <nuxt /> element is our page’s content. That’s it. However, we can add additional markup and components and expand this template. Let’s add a hypothetical header and footer to the default layout.

layouts/default.vue

<template>
  <div>
    <Header />
      <nuxt/>
    <Footer /&gt...