1

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

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

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

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

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

1 ответ 1

0

Согласно ответа на 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 - это самый лучший подход для поддержки слотов в макетах.

1
  • Спасибо большое.
    – skobanev
    18 фев 2021 в 10:01

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.