Nuxt Layouts

up:: Nuxt Add in the layouts/ folder.

• default.vue applies to any page
• <slot /> indicates where the page content should go into. Using the definePageMeta(), you can define a layout to use.

definePageMeta({
	layout: "base"
})

Or you can hardcode it on the <NuxtLayout> component like so:

<template>
  <NuxtLayout :name="layout">
    <NuxtPage />
  </NuxtLayout>
</template>
 
<script setup>
// You might choose this based on an API call or logged-in status
const layout = "custom";
</script>