How to set a nuxtjs layout for all pages in a directory?

Question

I have a different layout for the public part of my website and a different layout for the admin area.

Currently I'm using

definePageMeta({layout: 'admin'})

How can I set the admin layout for all pages within the pages/admin directory or based upon the route admin, admin/** without having to specify it for every page individually?

Answer 1

If I understood your question correctly, it's achievable by calling the NuxtLayout inside pages route, like this.

Any routes inside the admin folder will have the admin layout

~/pages/admin.vue

<template>
  <div>
    <NuxtLayout name="admin">
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

Pages directory example would be something like this. The index.vue inside the admin folder is your admin page content.

Admin layout example. ~/layouts/admin.vue

<script lang="ts" setup>

</script>
<template>
  <div>
    <h1>Admin Layout</h1>
    <div>
      <slot />
    </div>
  </div>
</template>
<style scoped lang="css"></style>

Hope this helps. Tested and it works