Javascript is required
Weekly Vue News Logo Weekly Vue News

Document is empty, overwrite this content with #empty slot in <ContentDoc>.

Weekly Vue.js News - #53 - Avoid Directly DOM Manipulation

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

Hi 👋

I’m back from my honeymoon. First, I apologize for the layout and content problems in my last two newsletter issues. You can expect the upcoming issues to have better quality.

In this issue, I will explain why you should avoid directly manipulating the DOM in Vue and use ref instead. Additionally, it includes curated articles and tools for you.

Have a great week ☀️

Vue Tip: Avoid Directly DOM Manipulation

It is a no-go to manipulate the DOM in Vue.js directly:

Instead, you want to make use of refs. ref is a special attribute that allows us to obtain a direct reference to a specific DOM element or child component instance after it's mounted.

Note that you can only access the ref after the component is mounted because the element doesn't exist until after the first render.

Let's take a look at the above example using a template ref:

Curated Vue Content

Ref vs Reactive Ref vs

👉🏻 Vue 3’s Composition API provides two main ways of declaring reactive data.

👉🏻 Anthony explains in this article the difference between these and which should you use.

Invalidating Computed with The Composition API

There are cases where you want to invalidate a computed prop you created and re-evaluate its value, this happens often if the computed prop uses non-reactive parts.

📹 Nuxt.js and Chrome

Kara Erickson spoke about the NuxtJS and Chrome collaboration that she works on as a member of the Chrome Aurora team.

📹 Vue.js Forge: Recap of Day 2

Highlights: Q&A with Evan You, live coding session by Maya Shavin and Jessica Sachs and more amazing guidance from other industry and product experts.

🛠️ Lotion

👉🏼 An open-source Notion UI built with Vue 3.

👉🏻 Uses , TypeScript and Vite.

🛠️ Vue Grid Layout

👉🏻 Like Gridster.js (from the jQuery days!) , but for Vue.js.

👉🏻 There’s a demo right on the homepage.

🛠️ Narrat Game Engine

A game engine entirely written using Vue.js

JavaScript Tip: Implement a builder with method chaining

We can implement a builder in JavaScript by writing a class that contains methods which return this:

After instantiating a new instance of the Builder class, we can chain the methods on the builder variable:

Curated Web Development Content

Migrating millions of lines of code to TypeScript

How and why the Stripe team migrated 3.7 million lines of JavaScript to TypeScript.

The 10 Most Common JavaScript Issues Developers Face

This article shows 10 of JavaScript’s subtleties that lead to a number of common problems that keep it from working.

Extract parameter types from string literal types with TypeScript

How to parse and derive types from string literal types in TypeScript using template literal types.

It's 1997 and you want to build a website

👉🏻 Let's time travel back to 1997. There is no Stack Overflow.

❓ How would you build a website?

Statements Vs. Expressions

👉🏻 Can you describe the difference between a statement and an expression in JavaScript?

👉🏻 If you’re not entirely sure, this is a good refresher on what’s involved.

Learn Test-Driven Development with JavaScript

👉🏻 This tutorial will teach you the strengths of this software development methodology.

👉🏻 You'll use the Jest library to code your own Unit Tests, Integration Tests, and End-to-End Tests.

I Regret My $46k Website Redesign

Michael talks about his lessons learned from a project that was supposed to take a few months and $15k but took eight months and $46k.

Quote of the Week

Tools & Misc

Announcing Docusaurus 2.0

"Docusaurus will help you build the best documentation websites with minimal effort, letting you focus on what really matters: writing the content."

Weekly Vue News LogoWeekly newsletter that gives you high-quality tips and curated content about Vue & Nuxt.
I will never share any of your personal data.
© 2023 All rights reserved.