bg de en es fr it nl pl pt sv tr zh

vue

Vue Composables Style Guide: Lessons from VueUse's Codebase

Alexander Opalic

I was studying VueUse’s codebase to understand how they structure their composables. VueUse has become the de facto standard library for Vue utilities, and I wanted to understand the patterns that make their composables so reliable. After diving deep into their source code, I distilled the key...

typescript vue

A Claude Code TDD Skill: Forcing Red-Green-Refactor Discipline

Alexander Opalic

I rely on Claude Code, but it has a structural limitation: it defaults to implementation-first. It writes the “Happy Path,” ignoring edge cases. When I try to force TDD in a single context window, the implementation “bleeds” into the test logic (context pollution). This article documents a...

ai testing vue

How to Handle API Calls in Pinia with The Elm Pattern

Alexander Opalic

If your goal is to cache backend results or manage server state, Pinia is not the right tool. Libraries such as [pinia-colada](https://pinia-colada.esm.dev/), [TanStack Vue Query](https://tanstack.com/query/vue), or [RStore](https://rstore.dev/) are designed for this purpose. They provide built-in...

vue

How to Write Better Pinia Stores with the Elm Pattern

Alexander Opalic

The Problem: Pinia Gives You Freedom, Not Rules Pinia is a fantastic state management library for Vue, but it doesn’t enforce any architectural patterns. It gives you complete freedom to structure your stores however you want. This flexibility is powerful, but it comes with a hidden cost: without...

vue

How VueUse Solves SSR Window Errors in Vue Applications

Alexander Opalic

I am a big fan of VueUse. Every time I browse the docs I discover a new utility that saves me hours of work. Yet VueUse does more than offer nice functions. It also keeps your code safe when you mix client-side JavaScript with server-side rendering (SSR). In this post I show the typical “window is...

vue

Type-Safe GraphQL Queries in Vue 3 with GraphQL Code Generator

Alexander Opalic

Why plain TypeScript isn’t enough If you hover over the result from useQuery in last week’s code, you’ll still see Ref<any>. That means: <li v-for="c in result?.countries2" :key="c.code"></li> …slips right past TypeScript. It’s time to bring in GraphQL Code Generator which...

graphql vue

Stop White Box Testing Vue Components Use Testing Library Instead

Alexander Opalic

TL;DR White box testing peeks into Vue internals, making your tests brittle. Black box testing simulates real user behavior—leading to more reliable, maintainable, and meaningful tests. Focus on behavior, not implementation. Introduction Testing Vue components isn’t about pleasing SonarQube or...

testing vue

The Computed Inlining Refactoring Pattern in Vue

Alexander Opalic

TLDR Improve your Vue component performance and readability by applying the Computed Inlining pattern - a technique inspired by Martin Fowler’s Inline Function pattern. By consolidating helper functions directly into computed properties, you can reduce unnecessary abstractions and function calls,...

refactoring vue

The Inline Vue Composables Refactoring pattern

Alexander Opalic

TLDR Group related logic in your Vue components into well-named functions inside <script setup>. The technique adapts Martin Fowler’s Extract Function pattern to keep components readable without splitting them into separate files. Introduction The Composition API and <script setup>...

refactoring vue

How to Do Visual Regression Testing in Vue with Vitest?

Alexander Opalic

TL;DR: Visual regression testing detects unintended UI changes by comparing screenshots. With Vitest’s experimental browser mode and Playwright, you can: Run tests in a real browser environment Define component stories for different states Capture screenshots and compare them with baseline images...

testing vue vitest

Building a Pinia Plugin for Cross-Tab State Syncing

Alexander Opalic

TLDR Create a Pinia plugin that enables state synchronization across browser tabs using the BroadcastChannel API. The plugin allows you to mark specific stores for cross-tab syncing and handles state updates automatically with timestamp-based conflict resolution. Introduction In modern web...

vue pinia

Solving Prop Drilling in Vue: Modern State Management Strategies

Alexander Opalic

TL;DR: Prop Drilling Solutions at a Glance Global state: Pinia (Vue’s official state management) Reusable logic: Composables Component subtree sharing: Provide/Inject Avoid: Event buses for state management Click the toggle button to see interactive diagram animations that demonstrate each...

vue

How to Use the Variant Props Pattern in Vue

Alexander Opalic

Building Vue components that handle multiple variations while maintaining type safety can be tricky. Let’s dive into the Variant Props Pattern (VPP) - a powerful approach that uses TypeScript’s discriminated unions with Vue’s composition API to create truly type-safe component variants. TL;DR The...

typescript vue

Atomic Architecture: Structuring Vue and Nuxt Projects

Alexander Opalic

Introduction Clear writing requires clear thinking. The same is valid for coding. Throwing all components into one folder may work when starting a personal project. But as projects grow, especially with larger teams, this approach leads to problems: Duplicated code Oversized, multipurpose...

architecture vue

How to Build Your Own Vue-like Reactivity System from Scratch

Alexander Opalic

Introduction Understanding the core of modern Frontend frameworks is crucial for every web developer. Vue, known for its reactivity system, offers a seamless way to update the DOM based on state changes. But have you ever wondered how it works under the hood? In this tutorial, we’ll demystify...

vue

What is Local-first Web Development?

Alexander Opalic

Imagine having complete control over your data in every web app, from social media platforms to productivity tools. Picture using these apps offline with automatic synchronization when you’re back online. This is the essence of local-first web development – a revolutionary approach that puts users...

architecture offline vue local-first

Vue Accessibility Blueprint: 8 Steps

Alexander Opalic

Creating accessible Vue components is crucial for building inclusive web applications that work for everyone, including people with disabilities. This guide outlines 8 essential steps to improve the accessibility of your Vue projects and align them with Web Content Accessibility Guidelines (WCAG)...

accessibility vue

How to Structure Vue Projects

Alexander Opalic

Quick Summary This post covers specific Vue project structures suited for different project sizes: Flat structure for small projects Atomic Design for scalable applications Modular approach for larger projects Feature Sliced Design for complex applications Micro frontends for enterprise-level...

architecture vue

How to Persist User Data with LocalStorage in Vue

Alexander Opalic

Introduction When developing apps, there’s often a need to store data. Consider a simple scenario where your application features a dark mode, and users want to save their preferred setting. Most users might prefer dark mode, but some will want light mode. This raises the question: where should we...

vue

How to Write Clean Vue Components

Alexander Opalic

Table of Contents Introduction Writing code that’s both easy to test and easy to read can be a challenge, with Vue components. In this blog post, I’m going to share a design idea that will make your Vue components better. This method won’t speed up your code, but it will make it simpler to test...

architecture vue

How to Test Vue Composables: A Comprehensive Guide with Vitest

Alexander Opalic

Introduction Hello, everyone; in this blog post, I want to help you better understand how to test a composable in Vue. Nowadays, much of our business logic or UI logic is often encapsulated in composables, so I think it’s important to understand how to test them. Definitions Before discussing the...

testing vue

Mastering Vue 3 Composables: A Comprehensive Style Guide

Alexander Opalic

Introduction The release of Vue 3 brought a transformational change, moving from the Options API to the Composition API. At the heart of this transition lies the concept of “composables” — modular functions that leverage Vue’s reactive features. This change enhanced the framework’s flexibility and...

vue

Best Practices for Error Handling in Vue Composables

Alexander Opalic

Introduction Navigating the complex world of composables presented a significant challenge. Understanding this powerful paradigm required effort when determining the division of responsibilities between a composable and its consuming component. The strategy for error handling emerged as a critical...

vue

Vue.js Tutorial for beginners

Adrian Mejia Blog

In this tutorial, you are going to learn the basics of Vue.js. While we learn, we are going to build a Todo app that will help us to put in practice what we learn. A good way to learn a new framework, It’s by doing a Todo app. It’s an excellent way to compare framework features. It’s quick to...

javascript vuejs todo app vue