Nuxt.js 默认布局未应用

Question

我是使用 Nuxt.js 的新手，并且遇到一个问题：当我创建项目时，布局文件夹没有按照文档自动生成。我手动添加了它，但 default.vue 没有在任何地方应用。这是

layouts/default.vue

：

<template>
  <div>
      <AppHeader/>
      <Nuxt/>
  </div>
</template>

我已经尝试过诸如手动将

default

设置为页面布局以及手动导入

AppHeader

中的

default.vue

组件（尽管这绝对不是问题，因为我放在那里的其他 HTML 也不会渲染） ）。不知道这里出了什么问题，挠头。使用

nuxt 2.15.7

。如果需要任何其他详细信息，请告诉我，我很乐意提供，谢谢。

Answer 1

今天，我遇到了同样的问题，我只是停止了 dev 命令并再次执行了

"npm run dev"

。

它像魅力一样醒来。

Answer 2

面对同样的问题，通过用

<NuxtLayout></NuxtLayout>

包装 app.vue 的内容来修复它

示例：

<template>
  <div>
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

更多详情请看这里： https://github.com/nuxt/framework/discussions/2883

Answer 3

我今天也遇到了这个问题，我花了大约15分钟才意识到......

我刚刚将我的文件夹命名为

layout

而不是

layouts

:')

我发布它只是为了防止其他人和我一样分心

Answer 4

更改一些软件包版本

"core-js": "^3.19.3",
"nuxt": "^2.15.8",
"vue": "^2.6.14",
"vue-server-renderer": "^2.6.14",
"vue-template-compiler": "^2.6.14",
"webpack": "^4.46.0"

Answer 5

您需要确保在 Default.vue 中使用 Slot

<template>
<div>
<nav><h2> This is layout navbar</h2> </nav>
<div>
    </slot>
</div>
    </div>
</template>

Answer 6

这就是我解决的方法：

<template>
  <NuxtLayout :name="layout">
    <NuxtPage />
  </NuxtLayout>
</template>

<script setup>
// You might choose this based on an API call or logged-in status
const layout = "custom";
</script>

Answer 7

只需在

nuxt.config.js

中定义您的组件文件夹路径

例如：

components: {
    dirs: [
      '~/shared',
      '~/shared/atoms',
      '~/shared/molecules',
      '~/shared/organisams',
    ]
  },