Weekly Vue News - #57 - Typing Template Refs With TypeScript

Migrated Issue

Expect missing links and broken styling, as this issue has been migrated from my previous newsletter service.

Hi 👋
I'm busy working on my code snippet tool, no time for more introductory words 🤪🧑🏻‍💻
Have a great week ☀️

Vue Tip: Typing Template Refs With TypeScript

Template refs only exist after the component is mounted. Thus, it’s necessary to type template refs with a union type that includes the DOM element type as well as null:

The initial ref value is null until the component is mounted or if the v-if directive unmounts the element. Therefore, we use optional chaining to access textareaRef.value.

Quick Vue Tip

A quick Vue tip that can be used to improve the UX in forms.

The following code automatically puts focus on the next element in the form after pressing “Enter” key:

Curated Vue Content

📕 The Vite Ecosystem

👉🏻 One of the strongest points in Vite is the ecosystem around it.

👉🏻 This article takes a look at some of the teams and people in the ecosystem.

📕 Understanding watchers in Vue

👉🏻 Elijah explains how watchers work in Vue, what they can do, and how to utilize them to build powerful apps.

📕 15 Game-Changing Tools in Vue 3 Ecosystem

👉🏻 VueUse

👉🏻 Vite

👉🏻 Nuxt

👉🏻 Pinia

👉🏻 and more...

🛠️ Lusift

👉🏻 A JavaScript library to create product walkthroughs for your web app

👉🏻 Compatible with React and Vue

👉🏻 Try a demo: https://frontendfoc.us/...

Quote of the Week

Curated Web Development Content

📕 Optimizing for JavaScript is hard

👉🏻 Jeroen discusses the challenges of optimizing JavaScript, especially as a compilation target

👉🏻 "Since Elm compiles to JavaScript and I occasionally like to try out optimization ideas"

📕 Modern web debugging in Chrome DevTools

👉🏻 This article discusses new features in Chrome DevTools that help developers see their code as they wrote it.

👉🏻 The changes are aimed at improving the debugging experience.

📕 CSS container queries are finally here

👉🏻 Ahmad gives a solid and succinct overview of how container queries work

👉🏻 They can be used to style elements based on the size of a container, rather than the viewport

📕 Functional programming is finally going mainstream

👉🏻 This article discusses functional programming, the rise of functional programming in mainstream languages, and the future of functional programming.

📕 Things You Should Know About Databases

👉🏻 Great blog post about how indexes and transactions work in databases.

🤩 npm query

npm query is a new command in the latest version of npm to query a project's dependencies using a CSS-like selector string.