Weekly Vue News #74 — Access DOM in Watcher Callback After Vue Updated It
Hi 👋
Happy New Year 🥳🎉🥂🎊
📊 Let’s recap my year 2022 📊
💍 I got married
💸 I had a very successful year as freelancer
📹 I started to create video content
📈 Grew from ~400 to nearly 2000 Twitter followers
📈 Increased LinkedIn follower count to more than 4000 followers
⭐ Rewrote the whole app using Nuxt 3
⭐ Published 9 blog posts
⭐ Published 45 Vue tips
⭐ Moved my weekly Vue newsletter to a separate domain
⭐ Published 52 newsletter issues
⭐ Launched my first SaaS
⭐ +200 registered users
⭐ +4000 exported code snippets
Let’s see what 2023 will bring 🤞🏻
Of course, you can expect a new Vue tip each week 💪🏻
Have a nice week ☀️
Vue Tip: Access DOM in Watcher Callback After Vue Updated It
If you make changes to reactive state in a Vue component, it can trigger both component updates and any watcher callbacks you have created.
By default, these callbacks are executed before the component updates, so if you try to access the DOM inside a callback, it will be in its pre-update state.
To access the DOM after Vue has updated it in a watcher callback, you can use the flush: 'post' option:
<script setup>
watch(source, callback, {
flush: 'post',
})
watchEffect(callback, {
flush: 'post',
})
</script>Example for Vue 2 with Options API:
<script>
export default {
// ...
watch: {
key: {
handler() {},
flush: 'post',
},
},
}
</script>Post-flush watchEffect() also has a convenience alias, watchPostEffect():
<script setup>
import { watchPostEffect } from 'vue'
watchPostEffect(() => {
/* executed after Vue updates */
})
</script>Curated Vue Content
📕 Using OAuth in Nuxt 3
👉🏻 OAuth is a widely-used industry standard for securely accessing user information without giving access to their passwords.
👉🏻 Michael gives an overview of how it works, and why he uses it for authentication in Nuxt 3 apps.
📕 How to reuse one Vue.js codebase across multiple apps
👉🏻 “Reusability is kind of the final boss of software development. (…) everything becomes more complex as soon as something needs to be reused many times.”
👉🏻 “This blog post is for everyone looking for their new favorite JavaScript backend framework.”
👉🏻 Marius explains just what systems like Next and Gatsby do and touches on a few differences.
Quote of the week
JavaScript Tip: How to Sort an Array of Integers
In JavaScript, Array.prototype.sort() sorts the elements of an array in place and returns the reference to the same array, now sorted. The default sort order is ascending, built upon converting the elements into strings and comparing their UTF-16 code unit value sequences.
sort() mutates the original array. Therefore we use [...numbers] to create a shallow copy of the array in the following example.
To sort an array of integers, we must provide a compare function that defines the sort order:
const numbers = [10, 3, 45, 999, 20]
const ascendingSortedNumbers = [...numbers].sort((a, b) => a - b)
console.log(ascendingSortedNumbers) // [ 3, 10, 20, 45, 999 ]
const descendingSortedNumbers = [...numbers].sort((a, b) => b - a)
console.log(descendingSortedNumbers) // [ 999, 45, 20, 10, 3 ]Curated Web Development Content
📕 Building a website like it’s 1999… in 2022
👉🏻 Sophie is on a mission this year to bring back the spirit of the old web.
👉🏻 “(…) and now so many websites look the same. These old personal websites were a reflection of yourself.”
📕 You can add biometric authentication to your webpage. Here’s how.
👉🏻 The easiest way to add biometric authentication to your web application is to use a standard called WebAuthn.
📕 Twenty Five Thousand Dollars Of Funny Money
👉🏻 Rachel worked for six weeks at a place that sold ads and fixed a bug that “gave 25 grand worth of funny money to anyone who clicked”.
📕 Build your own synthetic user testing
👉🏻 Syntethic tests simulate the random, unexpected behaviors of your users.
👉🏻 In this tutorial, Ben shows how to build a synthetic monitoring test for a form on a website.
👉🏻 Unified access to the best community driven cheat sheets repos of the world.
👉🏻 open-pdf-sign allows users to sign PDF files digitally from the command line or webserver.
👉🏻 Allows users to cut, copy, and paste anything anywhere from the terminal.
👉🏻 It works straight out-of-the-box with zero dependencies on Windows, Linux, Android, macOS, and many other operating systems.
Originally published at https://weekly-vue.news.
