Hi 👋
I published a new blog post about my custom-built newsletter service. You can find the link below in the "Curated Vue Content" section.
Finally, I bought a new microphone (
At Vue.js Nation 2023 (25th & 26th January), I will give a lightning talk:
Have a nice week ☀️
Vue Tip: Dynamically Change Page Title
To set the document title, we define the <title> tag in our index.html file:
<!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>Vue Tip: Dynamically Change Page Title</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
In many applications, we have different routes and want to show a dedicated title for each route.
Unfortunately, this does not work out of the box, and we need to write some code to enable this functionality.
Let's take a look at an exemplary route configuration (check the
import { createRouter, createWebHistory } from 'vue-router'
import Home from '@/views/Home.vue'
const router = createRouter({
history: createWebHistory(),
routes: [
{
path: '/',
component: Home,
},
{
path: '/about',
component: () => import('@/views/About.vue'),
},
{
path: '/contact',
component: () => import('@/views/Contact.vue'),
},
],
})
export default router
We can use the beforeEach guard adds a navigation guard that executes before any navigation:
router.beforeEach((to, from) => {
document.title = to.meta?.title ?? 'Default Title'
})
In this example, we edit the page title using the document object, which is not advised when using server-side rendering (SSR).
I recommend the
Inside the navigation guard callback, we use document.title to set the document's title. We use the ??) in combination with ?.) to set Default Title if the meta object or the title is undefined.
Finally, we need to define the metadata on our routes:
routes: [
{
path: '/',
component: Home,
meta: {
title: 'Home',
},
},
{
path: '/about',
component: () => import('@/views/About.vue'),
meta: {
title: 'About',
},
},
{
path: '/contact',
component: () => import('@/views/Contact.vue'),
meta: {
title: 'Contact',
},
},
],
At this point, we have updated our code to update the page title when the page changes dynamically.
We can improve the code by adding "more dynamic" page titles using
<script setup>
const client = await useClient()
</script>
<template>
<router-link :to="{ name: 'ViewClient', params: { pageTitle: `${client.firstName} ${client.lastName}` } }">
View client details
</router-link>
</template>
We can access the route params via to.params and set the document's title accordingly:
router.beforeEach((to, from, next) => {
const titleFromParams = to.params?.pageTitle
if (titleFromParams) {
document.title = `${titleFromParams} - ${document.title}`
} else {
document.title = to.meta?.title ?? 'Default Title'
}
})
Curated Vue Content
| 📕 How I Replaced Revue With a Custom-Built Newsletter Service Using Nuxt 3, Supabase, Serverless, and Amazon SES |
👉🏻 This article explains how I built a custom newsletter service using Nuxt 3, Supabase, Serverless, and Amazon SES. |
| mokkapps.de |
| 📕 Vue: 2022 Year In Review |
👉🏻 With 2023 upon us, Evan You takes the opportunity to recap what happened in 2022, and discuss what to expect in 2023. |
| blog.vuejs.org |
| 📕 API Management in Nuxt 3 with TypeScript |
👉🏻 "By implementing the DRY (Don’t Repeat Yourself) principle and the repository design pattern, we can set up our large-scale Nuxt 3 projects so that our API requests are handled neatly and efficiently" |
| medium.com |
| 🛠️ Vue Flow |
👉🏻 A highly customizable Vue 3 Flowchart component. 👉🏻 Build your own, customized node-based applications like static diagrams or even more complex and interactive editors. |
| github.com |
Quote of the week
JavaScript Tip: Get Valuable Info About Device Battery
The
Knowing a device's battery status can be helpful in several situations or use cases. Here are some examples:
- Save the application state before the battery runs out to prevent data loss.
- Pause heavy computations/animations when the battery is low.
- For example, an email client may check the server for new emails less frequently if the device is low on battery.
- Switch to dark mode when the battery is low, which can save energy.
Let's take a look at a simple example to get the device's battery status:
navigator.getBattery().then((battery) => {
console.log(`Battery level: ${Math.round(battery.level * 100)}%`)
// Battery level: 57%
console.log(`Battery discharging time: ${battery.dischargingTime / 60} minutes`)
// Battery discharging time: 179 minutes
})
Curated Web Development Content
| 📕 Does WWW still belong in URLs? |
👉🏻 There’s a long-running argument over URL names. 👉🏻 Here's the reasoning for both sides. |
| css-tricks.com |
| 📕 Leaked a secret? Check your GitHub alerts…for free |
👉🏻 GitHub is rolling out secrets scanning to all public repos for free. |
| github.blog |
| 📕 Some really cool (programming) tech that I think are underrated right now |
👉🏻 This Twitter thread covers useful and underrated programming technology. 👉🏻 The tools include CUE, Remix, H3, Passkeys, ztsd, Matter, and more. |
| threadreaderapp.com |
| 🛠️ Sailboat UI |
👉🏻 Sailboat UI is a UI framework for Tailwind CSS. 👉🏻 It features over 150 open source components. 👉🏻 The components include avatars, badges, buttons, dropdown menus, and input fields. |
| sailboatui.com |
