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?
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
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.
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.