Пользовательский макет Nuxt 3 показывает, что выбран недопустимый макет

Question

Я пытаюсь добавить собственный макет в проект Nuxt 3. но этот макет не работает, и на консоли отображается сообщение вроде

Выбран недопустимый макет test_layout

Другой ошибки нет.

Это код, который я пробовал.

- | макеты /

--- | test_layout.vue

      <template>
  <div>
    My Test Layout Header
    <slot />
  </div>
</template>
<script>
export default {
  name: "test_layout"
}
</script>

- | страницы /

--- | блог / index.vue

      <template>
<div>
  <p>My Blog Title</p>
</div>
</template>

<script>
export default {
  layout:"test_layout",
  name: "blog",
}
</script>

я пытался <Nuxt/> вместо <slot />, но не работает.

Answer 1

Nuxt 3, кажется, заменяет подчеркивание имени файла дефисами, поэтому макет должен быть указан как test-layout:

      // blog/index.vue
export default {
  // layout: 'test_layout', // ❌ replace underscore with hyphen

  layout: 'test-layout', // ✅
}

демо

Это не было проблемой в Nuxt 2 , который использует точное имя файла в качестве имени макета (включая символы подчеркивания). Я также не вижу никакой документации по этому поводу. Я сообщил о проблеме , чтобы получить некоторые разъяснения.

Answer 2

Удалите приведенный ниже код из файла макета. Это может сработать.

      <script>
    export default {
      name: "test_layout"
    }
</script>