В последнем релизе Inertia.js появился новый компонент именуемый «Inertia head». Этот компонент позволяет обновлять теги <title> и <meta> внутри тега <head> в вашем HTML. До появления этого компонента попытка изменить <title> вашей страницы, хотя и не была невозможной, но уж точно не представляла из себя простую задачу. Теперь же вы можете не только с легкостью сделать это внутри компонента страницы, но и также можете эффективно использовать любые свойства, передаваемые на вашу страницу. Представьте себе возможность динамически устанавливать теги Open Graph или обновлять заголовок страницы, когда пользователь читает статью, или даже изменять фавикон; это все возможно. Для того чтобы продемонстрировать эту новую фичу, я воспользуюсь своим любимым стартовым набором (starter kit) Laravel Breeze. Начните с создания нового приложения Laravel. Как только оно будет запущено, сделайте cd в свой новый проект и запустите после чего сделайте После запуска вы должны увидеть, что devDependencies вашего package.json были обновлены и выглядят следующим образом. Чтобы можно было воспользоваться <inertia-head>, нам нужно актуализировать версию @inertiajs/inertia, @inertiajs/inertia-vue3. Пока мы это делаем, мы также можем обновить @inertiajs/progress до последней версии, но это не обязательно. Затем давайте установим JavaScript зависимости, построим наши ассеты и проследим за изменениями. Далее, нам нужно отредактировать лейауты нашего приложения и добавить теги <inertia-head>. Сейчас мы установим здесь «значения по умолчанию», которые мы можем переопределять на уровне страницы. В Breeze есть два лейаут-компонента: Guest.vue, расположенный в resources/js/Layouts/Guest.vue, и Authenticated.vue, расположенный в resources/js/Layouts/Authenticated.vue. Лейаут Guest.vue используется всеми auth-вью, а Authenticated.vue используется, когда пользователь аутентифицирован и просматривает свой дашборд. В этом примере мы сосредоточимся auth-экранах и лейауте Guest.vue.  Добавьте следующее в Guest.vue в любом месте тегов <template>. Я использую Laravel Valet локально, поэтому, если я перейду по адресу http://inertia-head-demo.test/login, я ожидаю увидеть, что заголовок этой страницы будет "Inertia Head Demo", но при посещении /login для проверки я увижу, что в заголовке будет отображаться "Laravel" или что-то, что установленно для APP_NAME в вашем .env файле. Причина в том, что на странице всегда должен быть только один тег <title>, а если их больше одного, то приоритет будет иметь первый, который появится на странице. Если вы зайдете в файл app.blade.php, вы увидите это в строке 8 Если вы удалите строку выше и обновите страницу, вы должны увидеть заголовок, который мы установили в нашем лейауте. Здорово, не правда ли? Хорошо, давайте сделаем еще один шаг. Откройте Login.vue и добавьте тег <inertia-head>, чтобы перезаписать значение по умолчанию, которое мы установили в Guest.vue Теперь, когда вы посетите  /login, вы увидите на вкладке браузера Inertia Head Demo - Login в качестве заголовка. Facebook и Twitter позволяют настраивать предварительный просмотр URL. Вы можете узнать больше о OG (Open Graph) тегах Facebook здесь и о карточках (Cards) Twitter здесь. Начнем с обновления дефолтного компонента <inertia-head>, который мы добавили в Guest.vue, добавив следующее. Вы можете увидеть OG мета-теги, за которыми следует заголовок. Здесь используются значения по умолчанию, и поскольку мы устанавливаем заголовок в <inertia-head> на нашей Login.vue странице, мы видим, что Inertia удаляет заголовок по умолчанию и использует заголовок из нашего компонента страницы. Теперь попробуем установить OG теги в нашем Login.vue компоненте. Я собираюсь добавить следующее: Теперь обновите и посетите /login… ЧТО ЗДЕСЬ ПРОИСХОДИТ? Наш тег <head> теперь содержит дубликаты наших метатегов; почему это происходит? Компонент <inertia-head> всегда гарантирует только один тег <title> . Когда дело доходит до <meta> тегов, <inertia-head> просто берет значения по умолчанию и <meta> теги из компонента Login.vue и стакает их, поэтому вы и видите их дублирование. К счастью, исправить это довольно просто. Мы можем указать <inertia-head>, как обрабатывать дубликаты, добавив свойство head-key, гарантирующее, что тег будет отображаться один раз. Измените Inertia head Guest.vue следующим образом: А в Login.vue компонент <inertia-head> нужно изменить так: После того, как вы внесете эти изменения, перекомпилируйте ваши ресурсы, обновитесь и вы должны увидеть следующее: Вот и все! Есть еще кое-что, что можно рассказать о <inertia-head>, например его преимущества в сочетании с грядущей фичей, обеспечивающей рендеринг на стороне сервера для Inertia. SSR для Inertia готов к использованию и в настоящее время поддерживает сайт Inertia.js, но документация о том, как заставить это работать в Laravel Forge и Heroku , в настоящее время доступна только спонсорам Inertia. Спасибо за ваше внимание! Не стесняйтесь писать мне в Twitter, если у вас есть какие-либо вопросы. Материал подготовлен в рамках курса "Framework Laravel".       Редактор