Document that vue-router does not handle head/metadata like page title

[Soviut]

What problem does this feature solve?

A colleague who is new to Vue expected that vue-router would be able to update the page title; this makes some sense. Vue-router introduces the concept of pages, so there could be an expectation that it also has facilities for updating the page metadata.

It would be good to document that vue-router does not have these facilities, but also link to something like @vueuse/head that can.

What does the proposed API look like?

A new page in the documentation guides that explains that vue-router does not handle metadata, but gives examples and links to some populate head/metadata libraries like @vueuse/head.

[posva]

This topic is useful but we don't really have a place for it. Do you have a suggestion? A PR here would be more helpful.

Note that documentation should point the user how to do things, not tell the user what isn't possible

[Soviut]

@posva I was planning to do a PR sometime this week. This is just here as a reminder.

I figured a "page head and title" page under the Advanced topics in the guides might be a good place.

[posva]

A whole new page for it looks like too much unless there is that much to say. Right now, this could be just mentioned in the afterEach hooks section

[Soviut]

I was planning on including links and examples to a few libraries that can update the head/metadata/title.

[sourabh504]

@posva and @Soviut Below are the details that can be added in document

The router instance has a afterEach hook that gets called after route change. This can be used to set window title as detailed below:

// Let's say this is your router instance, with all "Named Routes"
const ROUTER_INSTANCE = new VueRouter({
mode: "history",
routes: [
{ path: "/", name: "HomeComponentName", component: HomeComponent },
{ path: "/about", name: "AboutComponentName", component: AboutComponent },
{ path: "*", name: "RouteErrorName", component: RouteError }
]
})

// Assign page titles for each of the "named routes"
// Reason: This allows us to have short named routes, with descriptive title
const PAGE_TITLE = {
"HomeComponentName": "Your Dashboard",
"AboutComponentName": "About Us Page",
"RouteErrorName": "Error: Page not found"
}

ROUTER_INSTANCE.afterEach((toRoute, fromRoute) => {
window.document.title = PAGE_TITLE[toRoute.name]
console.log(toRoute) // this lets you check what else is available to you here
})

[ali-hazan]

import` { createMemoryHistory, createRouter } from "vue-router";
import HomeView from "./components/HomeView.vue";
import AboutView from "./components/AboutView.vue";

const routes = [
{
path: "/",
component: HomeView,
meta: {
title: "Home",
},
},
{
path: "/about",
component: AboutView,
meta: {
title: "About",
},
},
];

const router = createRouter({
history: createMemoryHistory(),
routes,
});

router.afterEach((toRoute) => {
window.document.title = toRoute.meta.title;
});

export default router;

Instead of creating a separate PAGE_TITLE object, I think we can embed the title inside the meta tag.