Nuxt.js поддерживают ли макеты из layouts слоты?

Question

В общем что-то не пойму с логикой. Есть default в layouts. В default есть например header.

Банально: Хочу иметь доступ к замене содержимого в header

Пытался сделать в header компонент, а на странице его переопределять - ругается nuxt на предкомпиляцию. На слотах тоже как то не вышло. Хотя было поздно и уже сильно хотелось спать.

Можно конечно плюнуть на все и воткнуть инфу по ID, но это уже на крайний случай.

С какой стороны подступиться? Может есть какой-нибудь реальный пример такого? Заранее спасибо.

Answer 1

Согласно ответа на github от создателя nuxt.js насчет поддержки использования слота в файлах макета:

Это невозможно с layouts логикой nuxt.js, поскольку он основан на vue-router.

Но с vue.js нет ничего невозможного ?

Вы можете создать, например, layout папку (без s), в которой вы можете создавать свои макеты со слотами.

layout/default.vue
<template>
  <div>
    <header>
      <slot name="toolbar"></slot>
    </header>
    <content>
      <slot name="content"></slot>
    </content>
  </div>
</template>
А затем на своих страницах вы можете импортировать макет (мы используем его как <page>) и использовать слоты:
<template>
  <page>
    <div slot="toolbar">
      <h2 class="md-title">Welcome to index</h2>
    </div>
    <div slot="content">
      <p>her comes the content...</p>
    </div>
 </page>
</template>

<script>
import page from '~/layout/default'

export default {
  components: { page }
}
</script>

В действующих версиях nuxt.js - это самый лучший подход для поддержки слотов в макетах.

БЛОГ НА HUSL

Nuxt.js поддерживают ли макеты из layouts слоты?

Ответы (1 шт):