Posts Tagged #vue
Every article on the Techalyst blog tagged with #vue.
Vue Router: Dynamic Routes and Lazy Loading
Most real apps have routes like /users/42 or /products/widget where part of the URL is data. Vue Router calls these dynamic routes, and they c...
Vite for Vue Projects
Vite is the build tool nearly every modern Vue project runs on. It compiles your single-file components, serves them with near-instant hot rel...
Vue 3 Lifecycle Hooks
A Vue component goes through a predictable lifecycle: it is created, mounted into the DOM, updated as data changes, and finally unmounted. Lif...
JavaScript Array Methods and Vue Reactivity
Most of the work in a Vue app is shaping data before it hits the template. A list of products comes back from an API and you need the cheap on...
State Management with Vuex 4
Vuex was the standard state store for Vue for years, and plenty of existing Vue 3 apps still run on Vuex 4. If you are maintaining one, you ne...
Computed Properties in Vue 3
A computed property is not stored data, it is a cached getter. You read it like a property, but behind it is a function whose result Vue cache...
Vue 3 Directives Explained
Directives are the special v- attributes you sprinkle through a Vue template to wire markup to your data. Most of them you reach for every day...
Handling Events in Vue 3 with v-on
v-on is Vue's addEventListener. It listens for a DOM event and runs a handler. You will mostly type its shorthand, @, but the mechanics behind...
v-model in Vue 3
v-model gives you two-way binding between a form control and a piece of reactive state. It looks like magic, but it is plain syntax sugar over...
State Management with Pinia
When state needs to be shared across many components, provide/inject starts to creak and you want a real store. Pinia is Vue's official answer...
Class and Style Bindings in Vue 3
Vue gives class and style special treatment when you bind them with :. Instead of forcing you to build a string by hand, it accepts objects an...
Vue Router: Navigation Guards
Navigation guards are hooks that run at points during a route change. They are how you protect pages behind authentication, confirm before dis...
Provide and Inject in Vue 3
Props pass data one level down. When a deeply nested grandchild needs something from a far-off ancestor, threading a prop through every compon...
Teleport in Vue 3
Some UI needs to live at the top of the DOM to behave: a modal that must not be clipped by a parent's overflow: hidden, a toast that should sp...
Mixins vs Composables in Vue 3
Every app eventually wants to share logic between components: a piece of state, a fetch helper, a window-size tracker. In Vue 2 the answer was...
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...
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...