Как изменить title в nuxt ssr?

Question

[Игорь]

Коллеги, здравствуйте!

Как изменить $route.meta.title из компонента?

layouts/default.vue

...
<div class="breadcrumb">
        <div>
          <Breadcrumbs :items="$route.meta.breadcrumbs"/>
        </div>
        <div>
          <h1>{{ $route.meta.title || '' }}</h1>
        </div>
      </div>
...

ssr включительно.

На самом деле, тайтлы уже проставлены, но мне нужно изменить один из них во время работы приложения, на одной из страниц.

Напрямую не меняется.

Как добиться этого?

Comments

[Сергей]

Но динамическое изменение meta тегов не работает с seo.
https://stackoverflow.com/questions/53300006/dynam...

[Игорь]

Сергей, Я использую ssr, а не билдю странички.

Answer 1

[Сергей]

Ты же можешь изменять title внутри любого дочернего компонента.
Посмотри в документации, может найдешь что-то полезное
https://nuxtjs.org/api/pages-head

Comments

[Игорь]

Да, это можно.
Дело в том что я привязал и title и h1 одновременно.
И всё хорошо, до того как нужно поменять значения именно в h1

title и h1 связаны с одной переменной.

Вот только title сменить не проблема, а h1 в layout проблема

[Сергей]

Игорь, как вариант, создать глобальное событие и в компоненте вызывать с новым значением, a в layout прослушивать его и подставлять в h1 новое значение (можно привязать тоже к какой-нибудь переменной).
Не знаю, на сколько удачный этот вариант))

[Игорь]

Сергей, На сервере работать не будет.
Если бы это было бы просто декорация.

Не особо шарю в SEO.
Заказчик требует этой реализации

title + h1

[Игорь]

Ладно, хорошо.
Можно поступить следующим образом.

Как можно прослушать изменение title в layout?

[Сергей]

Игорь, вот тут почитай, предлагают несколько вариантов решения. Может найдешь подходящий https://github.com/nuxt/nuxt.js/issues/464

[Игорь]

Вот тут не совсем понял.

Это нужно разместить в layouts/default.vue?

head () {
    let sefl = this
    if (process.browser) {
      this.title = document.title
    }
    return {
      changed ({title}) {
        sefl.title = title
      }
    }
  },

И причём здесь changed ?

Наверное проще поставить костыль и разместить h1 в компоненте где я хочу его видеть.

Ну сам header title не сложно установить.
Сложность с h1 в родительском компоненте.

Либо плюнуть и в каждой странице
делать так

<div class="breadcrumb">
        <div>
          <Breadcrumbs :items="$route.meta.breadcrumbs"/>
        </div>
        <div>
          <h1>{{ title }}</h1>
        </div>
      </div>

[Игорь]

Игорь, При этом нарушить правило дублирования кода