Javascript is required
Weekly Vue News Logo Weekly Vue News

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

Weekly Vue News - #60 - Lifecycle hooks for debugging

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

Hi 👋

I'm still busy improving CodeSnap and waiting for the verification process of my payment provider. Then I will start a small marketing campaign with discounts for the Pro plan.

Have a great week ☀️

Vue Tip: Lifecycle hooks for debugging

Vue provides two lifecycle hooks that we can use for debugging purposes: "onRenderTracked" and "onRenderTriggered".

These hooks are development-mode-only and not called during server-side rendering.


Registers a debug hook to be called when a reactive dependency has been tracked by the component's render effect:

Image created with


Registers a debug hook to be called when a reactive dependency triggers the component's render effect to be re-run:

Image created with

Curated Vue Content

📕 Vue.js Performance Guide

👉🏻 This article takes a look at the basics of performance optimization for Vue apps and guides you towards resources and tools that help you go deeper.

📕 Migrate Components Written in Vue 2 Options API To Vue 3 Composition API

👉🏻 If you’re going to migrate your app/s to Vue3, or just trying the new syntax of Vue3 the upcoming topic will help you kickstart with a lot of confidence.

📕 What is a Clean Component?

👉🏻 "A Clean Component does not hold you back from being productive over the long term."

JavaScript Tip: Create a range of numbers

Image created with

Curated Web Development Content

📕 Why the number input is the worst input

👉🏻 Think that web form has got your number?

👉🏻 If you used input type=“number”, you may be surprised to find that it doesn't.

📕 A Proposed JS Feature: Extractor Objects

👉🏻 Entering stage one at the latest TC39 meeting is a proposal for being able to define your own logic (such as data validation or transformation) to run as part of the object destructuring process.

📕 Best practices for creating a modern npm package

👉🏻 A step-by-step “as of 2022” walkthrough of creating your own npm package using current best practices.

👉🏻 It’s very thorough and certainly worth revisiting, even if you’ve built a package already.

🛠️ Generate GitHub Commits

👉🏻 A command-line tool to generate your GitHub activity graph.

👉🏻 Does your profile look like you have stopped coding at all?

👉🏻 No worries, this script will help you.

🛠️ Theatre.js

👉🏻 An animation library for high-fidelity motion graphics that can be used visually or programmatically.

Quote of the Week

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.