How to dynamically change the page title with Vue and Vue Router
Image by: John Komarnicki
Changing the page title in your Vue SPA application is not as straightforward as you would think. In this article, I will show you a few ways how you can easily change the page title when navigating your application.
First off, you will need to have installed the Vue Router.
yarn add vue-router@4Vue Router is a routing library for built for Vue! It allows you to create routes in your application that map to specific components, which can then be rendered within the application. For example, you could use Vue Router to create routes for a dashboard page, a user profile page, and a settings page, and then use the router to navigate between them. This makes it easier to build a single-page application (SPA) that has multiple views and a consistent structure.
When navigating between pages in the app, it would be ideal if the Page Title updates. Unfortunately, it does not out of the box, which is why their needs to be done a bit of work to make that happen!
Configure Vue Router
As mentioned, we need to do a bit of work which includes configuring the Vue Router to change the page title dynamically! We can make use of the beforeEach guard on the…
