如何使用nuxtjs 3中文件夹中的布局？

Question

我正在用NuxtJs3开发一个应用程序。在nuxt 3中，布局功能已经改变了。我们可以使用布局通过<NuxtLayout name="layoutName">和这个layoutName是在布局文件夹。我的问题是，布局在布局目录内的另一个文件夹中。我怎么能用呢？

Answer 1

不一定要完全理解最后想要的是什么，但是假设您想用属性更改属性目录的路径。

您可以在nuxt.config.ts中使用以下内容来完成这一任务

import { defineNuxtConfig } from 'nuxt'

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

然后，您的所有布局都将在该目录中可用。

​

​

现在，我们有一个非常简单的other.vue布局，如下所示(custom.vue几乎相同)

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

我们可以在/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>

这将允许我们简单地从一个布局切换到另一个布局，也就是custom或other。

​

​

如果您希望有两个目录，如下所示：

• /layouts/custom.vue
• /layouts/nested/other.vue (嵌套1级更多)

然后，我没有实现一种简单的方法来管理有关布局的导入。

我从未见过这种配置，甚至可以说，如果您有很多不同的布局(到嵌套它们的程度)，那么我建议您将内容包装在components中，而不是 layouts 中。

因为布局对于页面来说是非常简单的全局外部包装，所以不涉及复杂的结构。这更像是一个组件的目的。

Answer 2

这个特性很久以前就添加到Nuxt 2中了。

添加对/layouts #1865中文件夹的支持

Nuxt.js不尊重单独文件夹中的布局。#1854

在nuxt 3中，它的工作方式似乎不一样，因为我面临着同样的问题。

文件夹中的布局( Nuxt 3)

更新..。

我检查了Nuxt 3的源代码，肯定不支持您想要做的事情。

示例：layouts/folder/custom.vue

然后在如下的页面中使用它

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

我刚给这个功能发了个公关。

添加对/layouts #5796中文件夹的支持

希望它能被接受，或者至少它给了某人一个添加这个的想法。