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

Question

我正在使用 NuxtJs 3 开发应用程序。在 nuxt 3 中，布局功能已更改。 我们可以通过<NuxtLayout name="layoutName">使用布局，这个layoutName在 layouts 文件夹中。 我的问题是，布局位于布局目录内的另一个文件夹中。 我该如何使用它？

Answer 1

不确定是否完全理解您最后想要的内容，但假设您想使用dir属性更改layouts目录的路径。

您可以在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 。