Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

313
Views
How to use layouts from a folder in nuxtjs 3?

I am developing an app using NuxtJs 3. In nuxt 3, layout feature has been changed. We can use layout via <NuxtLayout name="layoutName"> and this layoutName is in layouts folder. My problem is,layout is in another folder inside layouts directory. How can i use that?

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

Not sure to fully understand what you want to have at the end, but let's say that you want to change the path of the layouts directory with the dir property.

You can do that with the following in nuxt.config.ts

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  dir: {
    layouts: 'fancyLayouts/nested'
  }
})

Then, all of your layouts will be available in that directory

enter image description here

Now, we have a very simple other.vue layout with the following (custom.vue is almost the same)

<template>
  <div>
    <slot />
    <br/>
    <p>other layout</p>
  </div>
</template>

We could have the following in /pages/index.vue

<script>
definePageMeta({
  layout: false,
});
export default {
  data: () => ({
    layout: "custom",
  }),
};
</script>

<template>
  <NuxtLayout :name="layout">
    <button class="border p-1 rounded" @click="layout === 'other' ? layout = 'custom' : layout = 'other'">
      Switch layout
    </button>
  </NuxtLayout>
</template>

This will allow us simply switch from one layout to another successfully aka custom or other.

enter image description here


If what you want is to have 2 directories like:

  • /layouts/custom.vue
  • /layouts/nested/other.vue (nested 1 level more)

Then, I did not achieved to have a simple way of managing the import regarding a layout.

I've never seen this kind of configuration and I'd even say that if you have a lot of various layouts (to the point of nesting them), then I recommend wrapping your content inside of components rather than layouts anyway.

Because layouts are meant to be quite simple global outside wrappers for the pages, nothing regarding a complex structure. It's more of a component's purpose.

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!