`@vueuse/head` переименован в `@unhead/vue` — это текущее название пакета. Unhead — framework-agnostic библиотека, `@unhead/vue` — адаптер для Vue. Установка и подключение: ```bash npm install @unhead/vue ``` ```javascript // main.js import { createApp } from 'vue' import { createHead } from '@unhead/vue' import App from './App.vue' const app = createApp(App) const head = createHead() app.use(head) app.mount('#app') ``` Использование в компоненте: ```vue ``` Реактивность работает из коробки — передаёшь `computed` или `ref`, и `` обновляется при изменении данных. `useSeoMeta` — удобная обёртка для SEO-тегов: ```vue ``` SSR-поддержка: ```javascript // entry-server.js import { renderToString } from 'vue/server-renderer' import { renderSSRHead } from '@unhead/ssr' import { createApp } from './main' export async function render(url) { const { app, router, head } = createApp() await router.push(url) await router.isReady() const appHtml = await renderToString(app) const headPayload = await renderSSRHead(head) return { appHtml, headPayload } } ``` ```javascript // server.js — вставляем head-теги в HTML const { appHtml, headPayload } = await render(url) const html = template .replace('', headPayload.headTags) .replace('', headPayload.htmlAttrs) .replace('', headPayload.bodyAttrs) .replace('', appHtml) ``` Глобальный шаблон title: ```javascript // main.js или App.vue useHead({ titleTemplate: (title) => title ? `${title} | Магазин` : 'Магазин' }) ``` ```vue ``` ## 📌 Реальные кейсы - **SPA с клиентской навигацией** — при переходе между страницами title и meta обновляются, поисковик видит правильные теги через SSR. - **Динамический og:image** — на странице статьи og:image меняется в зависимости от обложки. Когда кто-то шарит ссылку в Telegram, превью показывает правильную картинку. ## Частые ошибки ```javascript // ❌ useHead в вложенных компонентах без понимания приоритета // Дочерний компонент перезаписывает title родителя // App.vue: useHead({ title: 'Магазин' }) // ProductPage.vue: useHead({ title: 'iPhone' }) // Результат: 'iPhone' (дочерний компонент побеждает — это корректно) // ❌ Строки вместо computed для динамических данных useHead({ title: props.product.name // НЕ реактивно — установится один раз }) // ✅ computed для реактивных данных useHead({ title: computed(() => props.product.name) }) ``` ## Резюме `@unhead/vue` (ex `@vueuse/head`) — стандарт для управления `` во Vue. `useHead()` и `useSeoMeta()` — реактивное обновление title, meta, link. Используй `computed` для динамических значений. SSR через `renderSSRHead`. `titleTemplate` для единообразного формата title. ---

Как работать с Head-менеджментом (@vueuse/head) в Vue?