Когда мы создаем новый проект vue в версии 3, мы получаем такой файл index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

Наша титульная страница на каждой отдельной странице: «Vite App». Как мы можем установить собственный заголовок страницы для каждой определенной страницы без каких-либо дополнительных пакетов? Очевидно, нам нужен vue router.
Давайте создадим маршруты для нашего приложения:

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: () => import("@/layouts/Panel.vue"),
      redirect: '/home',
      children: [
        {
          path: '/home',
          component: () => import("@/views/HomeView.vue"),
          meta: {
            pageTitle: "Home"
          }
        },
        {
          path: '/departments',
          component: () => import("@/views/departments/List.vue"),
          meta: {
            pageTitle: "Departments"
          }
        },
      ]
    },
  ]
});

export default router

В мете мы можем определить дополнительное поле для нашего маршрутизатора, такое как pageTitle, хлебные крошки и т. д.
Перед экспортом маршрутизатора по умолчанию мы должны добавить этот фрагмент кода:

router.beforeEach((to, from, next) => {
  document.title = `${to.meta.pageTitle} - ${import.meta.env.VITE_APP_NAME}`;
  next();
});

Кроме того, мы можем добавить к заголовку страницы название нашего приложения. Нам нужно определить его в файле .env

VITE_APP_NAME="Department App"

Вот и все :)

PS:

Не забудьте подписаться на мой аккаунт.