Не передаются компоненты в слот?

Question

[Mice789]

Компоненты не передаются в слот, эти слоты находятся в app/layouts/default.vue, мне нужно их отрисовать в pages/index.vue. Если я вызываю компонент не в template, то они отображаются.

pages/index:

<template>
        <NuxtLayout>
        <template #sidebar>
            <ChatSidebar />
        </template>
        <template #header>
            <ChatHeader />
        </template>
        </NuxtLayout>
</template>

<script lang="ts" setup>

</script>

app/layouts/default.vue:

<template>
    <div class="flex h-screen">
        <div class="w-1/3 bg-gray-800">
            <slot name="sidebar" />
        </div>
        <div class="w-2/3 flex flex-col">
            <div class="border-b bg-gray-900">
                <slot name="header" />
            </div>
            <div class="flex-1 overflow-y-auto p-4">
                <slot name="content" />
            </div>
            <div class="border-t">
                <slot name="footer" />
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>

</script>

nuxt.config.ts:

export default defineNuxtConfig({
  compatibilityDate: '2024-11-01',
  builder: 'vite',
  devtools: { enabled: true },

  css: ['~/app/styles/main.css', '~/app/styles/shadcn.css'],


  modules: [
    '@nuxt/icon',
    '@nuxt/image',
    '@nuxt/ui',
    '@nuxt/fonts',
    '@nuxt/eslint',
  ],

  imports: {
    autoImport: true 
  },

  components: {
    dirs: [
      '~/widgets/chat-sidebar/ui',
      '~/widgets/chat-header/ui',
    ]
  }

})

app/app.vue:

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


<script lang="ts" setup>


</script>

Comments

[Геннадий]

3.8

[Mice789]

Геннадий, Исправил

Answer 1

[Андрей]

Вероятно, Nuxt не может найти файл лэйаута, потому что директория с ними не в корне проекта, поменять можно в конфиге. Это касается всех стандартных директорий.

export default defineNuxtConfig({
  dir: {
    layouts: 'app/layouts',
  },
})