Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

314
Visualizações
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 Respostas
Responde à pergunta

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda