Weekly Vue News

By Michael Hoffmann (Mokkapps)

Hi 👋 My name is Michael Hoffmann and I'm a Senior Frontend Developer, Freelancer and Blogger. I focus on Vue.js, JavaScript, TypeScript and Spring Boot. Occasionally I also give career & freelancer advice. My weekly emails reflect this preference.

Hi 👋

My name is Michael Hoffmann and I'm a Senior Frontend Developer, Freelancer and Blogger.

I focus on Vue.js, JavaScript, TypeScript and Spring Boot. Occasionally I also give career & freelancer advice.

My weekly emails reflect this preference.

By subscribing, you agree with Revue’s Terms of Service and Privacy Policy and understand that Weekly Vue News will receive your email address.

358

subscribers

61

issues

#61・

Weekly Vue News - #61 - Expose slots from 3rd-party child component

Third-party components are often wrapped in a custom component. But in that way, the slots of the third-party component get lost.The following solution exposes all slots of the third-party component to the parent component:

 
#60・

Weekly Vue News - #60 - 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.

 
#59・

Weekly Vue News - #59 - Watch multiple properties with their previous value

It's possible to add an array of multiple sources to the watch hook.We can also access the previous values of each source:

 
#58・

Weekly Vue News - #58 - Writeable Computed Property

Computed properties are by default getter-only. If you attempt to assign a new value to a computed property, you will receive a runtime warning. In the rare cases where you need a "writable" computed property, you can create one by providing both a getter and…

 
#57・

Weekly Vue News - #57 - 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:

 
#56・

Weekly Vue News - #56 - Avoid Side Effects in Computed Properties

It is considered bad practice to introduce side effects inside computed properties and functions because it makes the code unpredictable and hard to understand.What is a side effect? In the context of computed properties, a side effect is a modification of th…

 
#55・

Weekly Vue.js News - #55 - Test components using Vue Testing Library

Vue Testing Library is my preferred Vue.js testing library. It is built on top of @vue/test-utils, the official testing library for Vue.If we write tests for our Vue components, we want them to be maintainable. Therefore, our tests should not include implemen…

 
#54・

Weekly Vue.js News - #54 - Create a custom directive

In addition to the default set of directives like v-model or v-show, you can also register your own custom directives. For this example, let's look at how you can create a v-theme directive that applies a specific style to an element of our template.Custom di…

 
#53・

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

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

 
#52・

Weekly Vue.js News - #52 - v-if vs. v-show

During toggles, v-if entirely creates and destroys the element, including event listeners and child components:

 
#51・

Weekly Vue.js News - #51 - Global Store On The Vue App Instance

Vue provides globalProperties on the app instance, an object that can be used to register global properties:

 
#50・

Weekly Vue.js News - #50 - Delay Loading Appearance of Spinner

Eager delay spinners are not a good user experience as they can make a snappy user interface feel slower. We can provide a better user experience (UX) by delaying spinners to appear only after a perceivable delay.To achieve this improved UX, you can use Async…

 
#49・

Weekly Vue.js News - #49 - Check if slot is empty

Inside the template, you can use $slots, an object representing the slots passed by the parent component.

 
#48・

Weekly Vue.js News - #48 - Memoize a sub-tree of the template using v-memo

The v-memo directive is like a computed prop for the template and be used on both elements and components.

 
#47・

Weekly Vue.js News - #47 - Understand the difference between the watch() and watchEffect() hook

We can use the watch() hook to trigger a callback whenever a piece of reactive state changes. It also enables us to access the previous value of the watched variables.

 
#46・

Weekly Vue.js News - #46 - Use fallthrough attributes

A "fallthrough attribute" is an attribute or v-on event listener that is passed to a component, but is not explicitly declared in the receiving component's props or emits. Common examples of this include class, style, and id attributes.For example, given a &l…

 
#45・

Weekly Vue.js News - #45 - Provide fallback content for slots

There are cases when it's useful to specify fallback (i.e. default) content for a slot, to be rendered only when no content is provided. A typical use case is a slot inside a <button> where we define a fallback if no text content is provided.

 
#44・

Weekly Vue.js News - #44 - Debug Computed Properties

We can debug computed properties by passing computed() a second options object with onTrack and onTrigger callbacks:onTrack will be called when a reactive property or ref is tracked as a dependency.onTrigger will be called when the watcher callback is trigger…

 
#43・

Weekly Vue.js News - #43 - Update v-model after change events

By default. the v-model syncs with the state of the Vue instance on every input event. The .lazy modifiert changes the v-model to only sync after change events.

 
#42・

Weekly Vue.js News - #42 - Create custom v-model modifier

v-model has some built-in modifiers like .lazy, .number and .trim. But in some cases, you might need to add your own custom modifier.In this simple demo, I want to create a custom modifier called no-underscore that removes all underscores _ from an input: