Enjoy!
🤔 What is a Vue Router?
VueRouter is a expressive, configurable and convenient routing for Vue.js.
Vue Router
🛣 Expressive route syntax - Define static and dynamic routes with an intuitive and powerful syntax.
🛑 Fine-grained Navigation control - Intercept any navigation and precisely control its outcome.
🧱 Component-based configuration - Map each route to the component that should display.
🔌 History modes - Choose between HTML5, Hash or Memory history modes.
🎚 Scroll control - Precisely control the scroll position in every page.
🌐 Automatic Encoding - Directly use unicode characters (你好) in your code.
If you would like to learn more about the basic usage of Vue Router, check out the official documentation here.
🟢 Dynamic page title and description with Vue Router
To create the custom page title and description with the usage of Vue Router, there are few things that we need to do.
Let's take a look at the following routes declaration:
export const routes = [{
name: 'MyCustomRoute',
path: 'my-custom-path',
meta: {
title: 'Amazing Title',
description: 'Awesome Description',
}
}];
It is a very simple route with the name and the path, but we also pass a meta object with both title and description. We will use these meta properties later on in the router configuration.
Now, let's take a look at the router itself.
const router: Router = createRouter({
routes,
// other router configuration options
});
At this point, we only register our routes in the router but magic will come in the beforeEach method of the router. This method adds a navigation guard that executes before any navigation and you can read more about it here
router.beforeEach((to) => {
const { title, description } = to.meta;
const defaultTitle = 'Default Title';
const defaultDescription = 'Default Description';
document.title = title || defaultTitle
const descriptionElement = document.querySelector('head meta[name="description"]')
descriptionElement.setAttribute('content', description || defaultDescription)
})
There is quite a lot of things that are going on here, so let's explain each individually:
- Destructure the
to.meta object to get both title and description properties.
- We set a value of
document.title to either the custom title or the default title if this custom title wasn't configured.
- If the description was passed as a meta, we set it to a custom one by using the
setAttribute method.
And that's it! With this navigation guard, we will be modifying dynamically both the title and the description of the website based on the router configuration.
Just keep in mind that this title and description won't be seen in the links or raw HTML of your website if you are using a classic SPA application because the Vue (and JS) are executed after the page load. If you would like to achieve that, you would need to convert your application into one of the following:
- Multi Page Application (MPA)
- Server Side Rendering Application (SSR)
- Static Site Generation Application (SSG)
📖 Learn more
If you would like to learn more about Vue, Nuxt, JavaScript or other useful technologies, checkout VueSchool by clicking this link or by clicking the image below:
Vue School Link
It covers most important concepts while building modern Vue or Nuxt applications that can help you in your daily work or side projects 😉
✅ Summary
Well done! You have just learned how to use Tailwind plugins to create custom classes.
Take care and see you next time!
And happy coding as always 🖥️