My name is Michael Hoffmann and I'm a Senior Frontend Developer, Freelancer and Blogger.
My weekly emails reflect this preference.
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:
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.
It's possible to add an array of multiple sources to the watch hook.We can also access the previous values of each source:
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…
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:
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…
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…
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…
It is a no-go to manipulate the DOM in Vue.js directly:
During toggles, v-if entirely creates and destroys the element, including event listeners and child components:
Vue provides globalProperties on the app instance, an object that can be used to register global properties:
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…
Inside the template, you can use $slots, an object representing the slots passed by the parent component.
The v-memo directive is like a computed prop for the template and be used on both elements and components.
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.
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…
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.
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…
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.
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: