Tag:vue
All content with the tag "vue".
Building a Real-Time Todo App with Jazz and Vue 3
Build a real-time, offline-capable todo app with Jazz and Vue 3. Learn CoValues, drag-and-drop with fractional indexing, and shareable URLs. No backend needed.
Read More→My Opinionated ESLint Setup for Vue Projects
A battle-tested linting configuration that catches real bugs, enforces clean architecture, and runs fast using Oxlint and ESLint together.
Read More→Vue 3 Testing Pyramid: A Practical Guide with Vitest Browser Mode
Learn a practical testing strategy for Vue 3 applications using composable unit tests, Vitest browser mode integration tests, and visual regression testing.
Read More→Vue Composables Style Guide: Lessons from VueUse's Codebase
A practical guide for writing production-quality Vue 3 composables, distilled from studying VueUse's patterns for SSR safety, cleanup, and TypeScript.
Read More→Forcing Claude Code to TDD: An Agentic Red-Green-Refactor Loop
Build a custom TDD workflow with Claude Code using skills and subagents that enforce Red-Green-Refactor discipline for your Vue projects.
Read More→Building a Modular Monolith with Nuxt Layers: A Practical Guide
Learn how to build scalable applications using Nuxt Layers to enforce clean architecture boundaries without the complexity of microservices.
Read More→How to Handle API Calls in Pinia with The Elm Pattern
Learn how to handle API calls in Pinia using the Elm pattern for predictable, testable side effects. Includes complete examples with the Pokemon API.
Read More→How to Write Better Pinia Stores with the Elm Pattern
Learn how to combine The Elm Architecture (TEA) principles with Pinia's private store pattern for testable, framework-agnostic state management in Vue applications.
Read More→How to build Microfrontends with Module Federation and Vue
Build a Vue 3 microfrontend app with Module Federation. Clear decisions, working code, and a small reference project.
Read More→How VueUse Solves SSR Window Errors in Vue Applications
Discover how VueUse solves SSR issues with browser APIs and keeps your Vue composables safe from 'window is not defined' errors.
Read More→Mastering GraphQL Fragments in Vue 3: Component-Driven Data Fetching
Part 3 of the Vue 3 + GraphQL series: Learn how to use GraphQL fragments with fragment masking to create truly component-driven data fetching in Vue 3.
Read More→TIL - Blending Fuzzy and Semantic Search with Reciprocal Rank Fusion
Learn how to merge fuzzy and semantic search results using Reciprocal Rank Fusion (RRF) with TypeScript implementation and interactive Vue demo
Read More→Indexed v-model in Vue 3
TIL about handling any number of inputs with one reactive array by binding each field to array[index] in Vue 3.
Read More→TIL - Detecting fresh deployments in a Vue 3 SPA with vite + version.json
Learn how to detect fresh deployments in a Vue 3 SPA with vite + version.json
Read More→Type-Safe GraphQL Queries in Vue 3 with GraphQL Code Generator
Part 2 of the Vue 3 + GraphQL series: generate fully-typed `useQuery` composables in Vue 3 with GraphQL Code Generator
Read More→Getting Started with GraphQL in Vue 3 — Complete Setup with Apollo
Part 1 of the Vue 3 + GraphQL series: a zero-to-hero guide for wiring up a Vue 3 app to a GraphQL API using the Composition API, Apollo Client, and Vite.
Read More→Stop White Box Testing Vue Components Use Testing Library Instead
White Box testing makes your Vue tests fragile and misleading. In this post, I’ll show you how Testing Library helps you write Black Box tests that are resilient, realistic, and focused on actual user behavior
Read More→The Computed Inlining Refactoring Pattern in Vue
Learn how to improve Vue component performance and readability by applying the Computed Inlining pattern - a technique inspired by Martin Fowler's Inline Function pattern.
Read More→TIL: Powerful Vue.js Patterns for Complex JSON Rendering
Key insights on using provide/inject and recursive components to build a JSON viewer in Vue.js
Read More→The Inline Vue Composables Refactoring pattern
Learn how to apply Martin Fowler's Extract Function pattern to Vue components using inline composables, making your code cleaner and more maintainable.
Read More→How to Do Visual Regression Testing in Vue with Vitest?
Learn how to implement visual regression testing in Vue.js using Vitest's browser mode. This comprehensive guide covers setting up screenshot-based testing, creating component stories, and integrating with CI/CD pipelines for automated visual testing.
Read More→How to Test Vue Router Components with Testing Library and Vitest
Learn how to test Vue Router components using Testing Library and Vitest. This guide covers real router integration, mocked router setups, and best practices for testing navigation, route guards, and dynamic components in Vue applications.
Read More→Building a Pinia Plugin for Cross-Tab State Syncing
Learn how to create a Pinia plugin that synchronizes state across browser tabs using the BroadcastChannel API and Vue 3's Script Setup syntax.
Read More→The Browser That Speaks 200 Languages: Building an AI Translator Without APIs
Learn how to build a browser-based translator that works offline and handles 200 languages using Vue and Transformers.js
Read More→Solving Prop Drilling in Vue: Modern State Management Strategies
Eliminate prop drilling in Vue apps using Composition API, Provide/Inject, and Pinia. Learn when to use each approach with practical examples.
Read More→Building Local-First Apps with Vue and Dexie.js
Learn how to create offline-capable, local-first applications using Vue 3 and Dexie.js. Discover patterns for data persistence, synchronization, and optimal user experience.
Read More→How to Use the Variant Props Pattern in Vue
Learn how to create type-safe Vue components where prop types depend on other props using TypeScript discriminated unions. A practical guide with real-world examples.
Read More→Deploy your Vue App to GitHub Pages with Caching
Learn how to speed up your GitHub Actions workflows by caching node_modules and properly deploy Vue apps to GitHub Pages
Read More→Dynamic Pinia Stores in Vue 3
Create dynamic Pinia stores with unique IDs for separate component instances
Read More→SQLite in Vue: Complete Guide to Building Offline-First Web Apps
Learn how to build offline-capable Vue 3 apps using SQLite and WebAssembly in 2024. Step-by-step tutorial includes code examples for database operations, query playground implementation, and best practices for offline-first applications.
Read More→Create a Native-Like App in 4 Steps: PWA Magic with Vue 3 and Vite
Transform your Vue 3 project into a powerful Progressive Web App in just 4 steps. Learn how to create offline-capable, installable web apps using Vite and modern PWA techniques.
Read More→Atomic Architecture: Structuring Vue and Nuxt Projects
Learn how to implement Atomic Design principles in Vue or Nuxt projects. Improve your code structure and maintainability with this guide
Read More→Vue 3.5's onWatcherCleanup: Mastering Side Effect Management in Vue Applications
Discover how Vue 3.5's new onWatcherCleanup function revolutionizes side effect management in Vue applications
Read More→How to Build Your Own Vue-like Reactivity System from Scratch
Learn to build a Vue-like reactivity system from scratch, implementing your own ref() and watchEffect().
Read More→What is Local-first Web Development?
What is local-first software and why does it matter? This guide covers local-first architecture, offline-capable apps with automatic sync, data ownership, and how to build a local-first web app with Vue step by step.
Read More→Vue Accessibility Blueprint: 8 Steps
Master Vue accessibility with our comprehensive guide. Learn 8 crucial steps to create inclusive, WCAG-compliant web applications that work for all users.
Read More→How to Structure Vue Projects
Discover best practices for structuring Vue projects of any size, from simple apps to complex enterprise solutions.
Read More→How to Persist User Data with LocalStorage in Vue
Learn how to efficiently store and manage user preferences like dark mode in Vue applications using LocalStorage. This guide covers basic operations, addresses common challenges, and provides type-safe solutions for robust development.
Read More→How to Write Clean Vue Components
There are many ways to write better Vue components. One of my favorite ways is to separate business logic into pure functions.
Read More→How to Test Vue Composables: A Comprehensive Guide with Vitest
Learn how to effectively test Vue composables using Vitest. Covers independent and dependent composables, with practical examples and best practices.
Read More→Mastering Vue 3 Composables: A Comprehensive Style Guide
Did you ever struggle how to write better composables in Vue? In this Blog post I try to give some tips how to do that
Read More→Best Practices for Error Handling in Vue Composables
Error handling can be complex, but it's crucial for composables to manage errors consistently. This post explores an effective method for implementing error handling in composables.
Read More→How to Improve Accessibility with Testing Library and jest-axe for Your Vue Application
Use Jest axe to have automatic tests for your vue application
Read More→