Layout

Nuxt provides features that enable the reuse of UI patterns.
Layouts are implemented in the ~/layouts directory and applied using NuxtLayout in app.vue.
Each page can specify a layout by using definePageMeta.

├── layouts/
│   ├── default.ts
│   └── custom.ts

<!-- layouts/custom.vue -->
<template>
  <div>
    <p>Some default layout content shared across all pages</p>
    <slot />
  </div>
</template>

<!-- app.vue -->
<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

<!-- pages/about.vue -->
<script setup lang="ts">
definePageMeta({
  layout: 'custom'
})
</script>

Middleware

Nuxt provides middleware that allows you to execute code before navigating to a specific route.\nThis feature is useful for cases such as restricting access to pages based on authentication status.