英文:
Named slots in layout can not be used within NuxtPage
问题
我认为我遗漏了一些基本的东西...
我想使用像官方文档中描述的布局功能一样的功能（链接：https://nuxt.com/docs/guide/directory-structure/layouts#setting-another-layout）
我的布局文件具有用于页眉和页脚的命名插槽。这些插槽需要从页面内部进行引用。
app.vue
<template>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</template>
layouts/default.vue
<template>
<header>
<slot name="header" />
</header>
<main>
<slot />
</main>
<footer>
<slot name="footer" />
</footer>
</template>
pages/index.vue
<template>
<template #header>
HEADER
</template>
</template>
我收到这个错误消息
[plugin:vite:vue] Codegen node is missing for element/if/for node. Apply appropriate transforms first.
我认为这是因为我将模板标记放在页面组件的根位置，但Google说模板标记需要放在根级别。
英文:
I think I'm missing something essential..
I want to use the layout functionality like it is described in the official docs
My layout file has named slots for header and footer. These slots need to be addressed from within the page.
app.vue
<template>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</template>
layouts/default.vue
<template>
<header>
<slot name="header" />
</header>
<main>
<slot />
</main>
<footer>
<slot name="footer" />
</footer>
</template>
pages/index.vue
<template>
<template #header>
HEADER
</template>
</template>
I'm getting this error
[plugin:vite:vue] Codegen node is missing for element/if/for node. Apply appropriate transforms first.
I think thats because i have the template tag as the root of the page component, but google says that the template tags need to be on the root level
答案1
得分: 1
这是如何使/pages/index.vue工作并渲染头部插槽中的文本：
<template>
<div>
<NuxtLayout name="default">
<template #header> HEADER </template>
</NuxtLayout>
</div>
</template>
但我不确定这是否是您真正想要做的。如果您想要一个通用的页眉和页脚，最好将此代码直接放在/layouts/default.vue中，或者创建一个组件并在那里使用它。
我为您准备了一个快速示例，演示如何设置具有通用页眉和页脚的布局：
https://stackblitz.com/edit/github-kzomp4
还请注意，除非您真的需要在应用程序中切换多个不同的布局，Nuxt 开发者建议不要干扰布局，而是将代码直接放在app.vue中。但这取决于您的实际用例。
英文:
This his how you make /pages/index.vue work and render the text in the header slot:
<template>
<div>
<NuxtLayout name="default">
<template #header> HEADER </template>
</NuxtLayout>
</div>
</template>
But I am not sure wheter this is what you really want to do. If you want to have a common header and footer, it is better to put this code right inside /layouts/default.vue or make a component and use it there.
I prepared a quick example of how I would setup layout with common header and footer:
https://stackblitz.com/edit/github-kzomp4
Also note that unless you really need to switch between more than one different layout in your application, Nuxt developers recommend not messing with layouts at all and put the code right into app.vue. But that depends on your real use-case.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论