Have you ever found yourself applying the same layout to multiple pages in your Nuxt.js project - manually - over and over again? Maybe you've tried setting up a global layout, only to realize it doesn't work as expected for subpages? No worries I got you! In this article, I’ll show you the best way to manage multiple layouts in Nuxt.js, including a method that will automatically apply layouts to all subpages without extra effort.
In Nuxt.js you can have more than only one layout. In most cases you will use one (default to all your pages) or none. But what in case when your project, gets more advanced and you want to apply one layout to more than one page without changing your default layout? And Ideally you want to use the same layout for all your sub-pages.
So at first you would need two layouts. One that will be applied by default to all your pages. You define it in your main app.vue file, by specifying NuxtLayout component.
<template>
<NuxtLayout name="default">
<NuxtPage />
</NuxtLayout>
</template>
For the second layout you can also use NuxtLayout on each page you want to apply this template on. However this approach is not very efficient or DRY (don’t repeat yourself), when you plan to apply it to many sub-pages.
In my opinion the best option for applying a layout to all your sub-pages is to define a directory with the same name as your parent page for example “app”. The next step is to define a .vue file with exactly the same name as the created directory. In this .vue file you need to define a layout that should be applied to all sub-pages. I tried to accomplish it with NuxtLayout component, unfortunately it didn’t work for me at all, the layout was not propagated to the sub-pages :(
There is also second option to do it. This option utilizes definePageMeta compiler macro.
By setting “layout” value to a string with the name of our layout .vue file, this layout will be applied to the app page and all sub-pages that are in directories and files below.
<template>
<div>
<NuxtPage />
</div>
</template>
<script setup lang="ts">
definePageMeta({
layout: "custom-1",
})
</script>
+--pages [dir]
+--app.vue [file] # all pages in dir `app` will have the same layout setup
+--app [dir]
+--index.vue [file] # content that will be displayed at `/app` path.
+--dashboard [dir]
+--index.vue [file]
+--settings.vue [file]