Posts About Vue.js
Vue.js is a progressive JavaScript framework for building user interfaces, known for its simplicity and flexibility. It enables developers to create dynamic and reactive web applications with ease.
Slots in Vue 3
Props pass data to a child, but slots pass markup. They let a parent inject content into holes a child component leaves open, which is how you...
Debounce and Throttle in Vue 3 with customRef
Debounce and throttle both limit how often something runs in response to rapid events. The neat trick in Vue 3 is that you can bake the timing...
Accessing DOM Elements with useTemplateRef in Vue 3
Most of the time you let Vue own the DOM and you never touch a real element. But now and then you have to. Focus an input when a form opens, m...
Component Communication in Vue 3 (Replacing the Event Bus)
In a real app you have components at many levels, and they need to talk to each other. In the Vue 2 days a popular trick was a global event bu...
Vue Router: Routing a Vue SPA
A single-page app swaps views without full page reloads, but it still needs URLs, so pages can be bookmarked, shared, and navigated with the b...
Props and Emits in Vue 3
Components talk to each other in two directions: data flows down through props, and events flow up through emits. Get that one-way contract ri...
Watchers in Vue 3: watch and watchEffect
Watchers run a side effect when reactive data changes: fetch on a query change, validate on input, sync to storage. Vue 3 gives you watch and...
Dynamic Components and keep-alive in Vue 3
Tabs, wizards, and switchable panels all need to render a different component depending on state. Vue's built-in <component> tag does ex...
Post-Flush Watchers vs nextTick in Vue 3
You change some reactive state, then you want to do something with the DOM right after. Scroll a chat window to the newest message. Focus an i...
The setup() Function in Vue 3
setup() is the entry point to the Composition API. It is where you create reactive state, computed values, and functions, and return what the...
Single File Components and script setup
A Single File Component, the .vue file, packs a component's markup, logic, and styles into one place. It is how nearly all real Vue is written...
Vue 3 Composables: Patterns and Best Practices
A composable is not a framework feature. It is just a function whose name starts with use, that leans on Vue's reactivity, and that you pull a...
Vue 3 Reactivity: ref, reactive, and the Whole API
Reactivity is what makes Vue feel magical: change a value, the DOM updates. But the magic only works if you make the value reactive in the rig...