有没有办法使布局在不是页面的组件上工作？

Question

我正在为components文件夹中的页面制作内容块。我希望每个块都有不同的布局。所以我试图让布局与我的组件一起使用。但是我似乎无法正常工作。当我尝试使用页面时，效果很好。布局在组件中不起作用吗？我看了这段视频https://www.youtube.com/watch?v=YOKnSTp7d38，并做了完全一样的事情，我需要做些什么才能使它工作？还是布局根本不适合这个？

dark.vue在根布局文件夹中

<template>
    <div class="dark">
        <nuxt />
    </div>
</template>

<style lang="scss">
.dark{
    background-color: green;
}
</style>

我在组件中使用的脚本位于组件文件夹内的根文件夹中

<script>
export default {
  layout: 'dark',
}
</script>