Practical Vue.js articles based on real project cases: component state, lifecycle, drag and drop, Rich Text editors, reusable components, DOM interaction, and complex UI bugs. The focus is on understanding the failure boundary and preventing regressions rather than presenting isolated examples.
In an SPA, an unread notification counter may stay correct while the tab is active and become stale after sleep, a background tab, or browser cache restoration. WebSockets are useful for live updates, but returning to the tab should reconcile state with the server.
The interface may render correctly while Vue still warns about the default slot. The cause is simple: when h() creates a component vnode, its content should be passed as a slot function rather than a raw string.
When a filter changes, the current page of the previous result set is no longer meaningful. But resetting pageIndex inside a watcher can easily trigger two identical requests. I show how to coordinate both reactions without duplicate loading.
In MessageAttachments.vue, an attachment card used one anchor to open a file and another nested anchor to download it. This article shows why @click.stop does not fix invalid HTML, how browser parsing can change the DOM, and why the two actions should be sibling interactive elements.
After reordering Content Blocks in a Vue editor, block UI labels could unexpectedly appear inside Rich Text content: locale, position, anchor help, editor labels, and other interface text. This article explores why drag and drop around contenteditable needs stable Vue keys, strict DOM boundaries, correct editor lifecycle handling, and an explicit content synchronization contract.