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.
Vue 3's defineModel Macro: Two-Way Binding Without the Boilerplate
Setting up two way binding on a component used to be a manual chore. Props are read only, so a child could not change the value passed to it d...
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...
CSRF with Vue, Axios and Laravel
If your Vue front end talks to a Laravel back end with Axios, CSRF is mostly handled for you. It is worth knowing how, so that when it does no...
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...
Conditional Rendering in Vue: v-if, v-else and v-show
Showing and hiding parts of the page based on a condition is one of the first things you do in Vue. It ships with a small set of directives fo...
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...
Fixing the "this is undefined" Error in Vue and JavaScript
If you have ever seen "this is undefined" pop up in your browser console while working with a filter or map callback, you are not al...
Building a Periodical Sales Analytics Chart with Laravel and Vue
I built this for an ERP system that runs in a few supermarkets. A client with several branches wanted to see which product categories sell the...
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...