Как в Nuxt встроить часть содержимого страницы в определенную область шаблона?

Question

[photosho]

Есть ли в Nuxt какое-то подобие @yield в Laravel? То есть, мне нужно создать макет приложения следующего вида:

div.header < yield
div.page
  div.content < yield 
  div.sidebar

В области "header" и "content" должно внедряться содержимое страниц (из папки "pages"), а все остальные области - сквозные для всех страниц и не должны затрагиваться. Есть ли механизмы для реализации подобной структуры в Nuxt 3 и Vue?

Comments

[modelair]

модифицируйте layout

[Aetae]

В нормальном vue-router есть именованные router-view, т.е. каждый лэйаут может содержать несколько router-view и каждый маршрут может раскидывать несколько компонентов как надо в этом лэйауте.
Nuxt я не трогал, но беглый гугл показывает, что там это можно сделать так.

Answer 1

[Антон Антон]

nuxt тут ничем не отличается от обычного vue приложения.
Можно воспользоваться телепортом для того, чтобы отправить часть компонента из router-view в нужное место хедера.
Ну либо просто в хедере какой-то компонент, который берет данные из стора и меняет свое состояние.

Comments

[photosho]

Антон Антон Попытался использовать Teleport - если отправлять данные в body, то все в порядке, а при попытке отправить в компонент по id (to="#element_id") в консоли появляется следующая ошибка:

Uncaught (in promise) TypeError: child is null

Вы с таким не сталкивались?

[Антон Антон]

нужно отложить рендер телепорта (например через v-if) до того, как все примонтируется, например:

<teleport to="#teleport-target" v-if="mounted">
      teleported content
    </teleport>

const mounted = ref(false)
  onMounted(() => {
    mounted.value = true
  })

[photosho]

Антон Антон, спасибо, и правда, в этом было дело.