CODEWITHSUNDEEP
javascriptvue.jsnuxt.jsvuejs3nuxt3.js
Sagar Jajoriya
Sagar Jajoriya

Reputation: 2375

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?

Upvotes: 1

Views: 3982

Answers (3)

lyrics
lyrics

Reputation: 61

Support for nested layouts is available in the latest release of Nuxt. The latest as of now is v3.10.

Read the docs here, Right below Named Layout, sorry I couldn't get the right hashtag ref for it:

https://nuxt.com/docs/guide/directory-structure/layouts#named-layout

Upvotes: 0

Danny Andres
Danny Andres

Reputation: 21

This feature was added in Nuxt 2 long ago.

Adds support for folders in /layouts #1865

Nuxt.js does not respect layouts in separate folders. #1854

It does not seem to work the same way in nuxt 3 because I'm facing the same issue.

Layouts inside folders Nuxt js 3

update...

I checked the source code for Nuxt 3 and definitely is not supported what you are trying to do.

example: layouts/folder/custom.vue

and then use it in pages like follows

<NuxtLayout name="folder/custom">some code ...</NuxtLayout>

I just sent a PR for this feature.

Adds support for folders in /layouts #5796

Hopefully it gets accepted or at least it gives someone the idea to add this.

Upvotes: 1

kissu
kissu

Reputation: 46726

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.

Upvotes: 3

Related Questions