This guide explains how to overcome large‑file upload limits by splitting files into chunks with Blob.slice, uploading them concurrently from a Vue front‑end, and merging the pieces on a Node.js back‑end using streams, while providing progress tracking and handling Nginx size restrictions.
This article explains why a Vue route's synchronous component import caused global CSS pollution and layout breakage, and demonstrates how switching to route lazy loading resolves the style conflict while improving performance and bundle size.
The author demonstrates how the Cursor AI coding assistant was used to migrate a Vue 3 horizontal‑scrollbar plugin to Vue 2, covering dependency replacement, code refactoring, documentation updates, build fixes, npm publishing, and adding new features through precise prompts.
This comprehensive guide outlines a 2025 front‑end and full‑stack knowledge system, covering server fundamentals, JavaScript runtimes, databases, storage, cloud services, Docker, serverless, micro‑services, major frameworks (React, Vue, Angular, etc.), mobile development, PC clients, engineering tooling, CI/CD, testing, monitoring, security, performance optimization, project management, and practical non‑technical advice.
After three years of building Vue apps, the author reveals how naive component extraction leads to sprawling directories, tangled props and events, and mounting technical debt, then offers concrete strategies—clear responsibilities, minimal APIs, slots, and abstraction skills—to design maintainable, reusable components.
Learn how to implement Webpack’s Module Federation using Vite and Vue, covering core concepts, advantages over traditional micro‑frontend solutions, detailed setup steps, code examples, and common pitfalls such as dependency conflicts and version mismatches.
This tutorial walks through creating a fire‑equipment inspection system where a mobile client reports anomalies and a backend pushes real‑time updates to a monitoring page using WebSocket, with a Vue front‑end and SpringBoot server implementation.
This article introduces the open‑source “3D Desktop Pet” project, detailing how to create a cross‑platform Electron application that combines a transparent always‑on‑top window, Three.js‑driven 3D pet interactions, and Dexie.js‑based task management, along with performance optimizations and multi‑window reminder system.
This document provides a comprehensive overview of a contract management and employee travel expense reimbursement system for small‑to‑medium enterprises, detailing its functional modules, BS architecture with Vue front‑end and Django back‑end, environment setup, database configuration, user registration, login procedures, and management of users, departments, projects, contracts, reimbursements, and financial approvals.
This article explains how repeated button clicks cause duplicate submissions, demonstrates using debounce and a loading‑disabled state to mitigate the issue, and shows how to encapsulate the solution into a reusable Vue 3 directive with complete code examples.
The Vue ecosystem has taken a major step into artificial intelligence by adding llms.txt files to its documentation sites and releasing the vitepress-plugin-llms, which automatically generates AI‑friendly metadata to improve developer efficiency and document parsing.
This article presents a scalable Vue architecture that separates generic dialog logic from component‑specific configuration panels, using dynamic creation with createApp and Element‑Plus dialogs to achieve high cohesion, low coupling, and easy maintenance for numerous low‑code components.
This article introduces TresJS, a Vue‑based declarative wrapper for Three.js that streamlines 3D scene creation, outlines its core features, suitable use cases, provides a quick‑start guide with Vite configuration and sample code, and lists lab utilities and resources.
This guide explains why data-testid is essential for reliable front‑end testing, outlines planning and QA involvement, shows how to add and use data-testid in React/Vue components, provides best‑practice guidelines, and demonstrates Playwright, Cypress, and Selenium scripts for robust automated tests.
The article explains how Vite’s native ES‑module architecture and the Model Context Protocol (MCP) enable deep AI integration via the vite‑plugin‑vue‑mcp, allowing tools like Cursor to access component trees, state and routing, which the author claims can raise development speed by up to 200% and cut bugs by 65%.
This article introduces a continuously updated Spring Boot 3 case collection and provides a step‑by‑step tutorial on implementing Server‑Sent Events using both the native EventSource API and the fetch‑event‑source library, covering backend controller code, frontend Vue integration, and practical code examples.
This article explores how bitwise operators can replace verbose boolean checks for permission handling, drawing examples from React Fiber, Vue3 virtual DOM, and common algorithmic problems, and provides a step‑by‑step guide to building a compact, high‑performance permission system in JavaScript.
This article explains why rendering massive lists can freeze devices, introduces the concept of a fixed‑height virtual list that renders only visible items, and provides step‑by‑step Vue code to calculate visible ranges, handle scrolling, and fix off‑by‑one glitches.
The article refutes the “frontend is dead” myth by showing that modern front‑end engineering is moving from a UI‑first approach to a data‑driven paradigm—using layered atomic, computed, and view models—to improve testability, efficiency, and AI‑assisted development, as demonstrated through practical Vue examples and a gray‑release case study.
WeaveFox, Ant Group’s AI‑powered front‑end platform, claims to turn design drafts into fully functional React or Vue code—including precise pixel alignment and interactive effects—in seconds, while offering cross‑terminal support, automated refactoring, performance boosts, and a continuous learning loop, yet the author argues it won’t fully replace developers.
This article explains why chaotic import statements hurt development, outlines the three main pitfalls, and provides a step‑by‑step guide to refactor imports using ESLint plugins, automatic fixing, and Vue‑specific adjustments to achieve a clean, maintainable codebase.
This article recounts the architectural challenges of the Xingyun 2.0 frontend platform, explains why its monolithic codebase and build process became unsustainable, and details the step‑by‑step migration to a modular monorepo with micro‑frontend, Nx, pnpm, and Tailwind to improve scalability, maintainability, and developer productivity.
This article chronicles the evolution of the Xingyun front‑end platform from a tangled monolithic Vue application to a modular, micro‑frontend monorepo, detailing the architectural pain points, the "inner‑outer same‑origin" overhaul, and the concrete steps taken to achieve better scalability, maintainability, and build performance.
Nginx UI is a Go‑and‑Vue powered web interface that simplifies Nginx server configuration, offering real‑time statistics, ChatGPT assistance, one‑click deployment, automatic Let's Encrypt renewal, log viewing, configuration editing with syntax highlighting, and multiple deployment options including binary, systemd, and Docker.
This article walks through reproducing a memory‑leak scenario in a Vue2‑based terminal application, analyzes common leak causes, demonstrates how adding dynamic keys and patching Vue's sameVnode function resolves the issue, and shows how to ship the fix with patch‑package for production deployments.
Vue 2’s reactivity relied on Object.defineProperty, which struggled with array mutations, dynamic properties, and performance overhead, prompting the Vue 3 team to adopt Proxy for full array support, seamless property tracking, and lazy, more efficient reactive handling, as illustrated by code comparisons.
This article demonstrates how to build a highly reusable, function‑based modal system in Vue 3 that supports lazy loading, prop passing, event binding, provide/inject data injection, custom slots, and method exposure, allowing developers to display any modal component with a single function call.
This article shares a step‑by‑step account of using AI tools such as Trae, Claude 3.5 Sonnet, and GPT‑4o to design, generate, and refine a Vue‑based frontend website within a single day, highlighting core strategies, best practices, and common pitfalls encountered along the way.
This article reviews the historical prominence of Element UI, outlines its limitations in modern projects, and explains why the team switched to Radix UI, highlighting Radix's customizability, broad framework support, web‑standard compatibility, and strong accessibility features.
This guide walks you through integrating Alipay's sandbox payment flow into the SpringBoot 3 + Vue based Mall e‑commerce project, covering order steps, configuration files, front‑end toggles, and a full demo of the checkout process.
This article provides a comprehensive guide to UnoCSS, covering installation in Vue 3 + Vite and Nuxt 3 projects, basic syntax and interactive documentation, Iconify SVG integration, various presets and transformers, as well as practical shortcuts, responsive design, safelist handling, custom rules, theming, and dark‑mode support.
Vorms is a 12KB, TypeScript‑based form validation library built with Vue 3's Composition API that offers strong typing, tree‑shakable size, easy integration, and flexible support for Yup, Zod and custom rules, making form handling both simple and powerful.
This guide explains how to embed OnlyOffice into a Vue application to enable PPT preview, online editing, and multi‑user collaboration within an internal network, covering solution evaluation, backend deployment considerations, and step‑by‑step front‑end implementation with complete component and usage code.
This article explains why Pinia is a lightweight alternative to Vuex, shows how to install and configure Pinia in a Vue project, demonstrates both option‑store and setup‑store definitions, covers state, getters, actions, destructuring techniques, built‑in helpers like $reset, $patch, $state, $subscribe, and introduces persistence with pinia‑plugin‑persistedstate.
This article explains the evolution of Vue development, introduces Vue Hooks as the core of the Composition API, demonstrates their advantages over Mixins with clear code examples, and provides best‑practice guidelines and common pitfalls for building maintainable, reusable front‑end components.
This article compares React 18 and Vue 3 component communication techniques—including parent‑child, sibling, and cross‑level patterns—provides detailed code examples for props, emit, context, provide/inject, and summarizes their respective advantages and use cases in modern web development.
This article explains why users may still see outdated pages after a Vue SPA deployment, analyzes the caching issues caused by static asset headers, and provides both back‑end coordinated and pure front‑end solutions—including WebSocket, SSE, ETag polling, custom Vite plugins, and example code—to automatically detect and prompt updates.
This article walks through the step‑by‑step implementation of a card UI component in both Flutter and Vue, explains the structural and styling differences, shows how to pass data and handle events, and concludes with a summary of Flutter’s widget‑centric approach, providing a practical learning resource for front‑end developers.
This article explains how to create a Vue component that supports both dragging and resizing by rendering CSS edges and corners, handling mouse events to track movement, calculating new dimensions, enforcing minimum sizes, and providing a complete template, script, and style implementation.
This article explains the fundamentals of WebAssembly, its advantages, how to install Rust, set up a Rust project, compile it to a .wasm module with wasm‑bindgen, and seamlessly integrate the resulting WebAssembly code into a Vue 3 frontend application using canvas drawing examples.
The article describes the design and development of a low‑code form generation platform built on VueFormMaking, detailing its drag‑and‑drop interface, JSON‑driven component architecture, template configuration and rendering, as well as maintenance practices such as flat configurations, style optimization, testing, and deep‑copy handling for scalability and reliability.
This guide walks you through setting up Jenkins to automatically build and deploy the Vue-based front‑end of the Mall e‑commerce project, covering plugin installation, NodeJS configuration, Git repository setup, build steps, shell scripts for packaging and remote deployment to Nginx, and final verification.
This article provides a comprehensive technical guide on Tencent Cloud's instant messaging (IM) service, comparing UI‑integrated and non‑UI integration approaches, detailing the core chat and input components, their Vue/TypeScript implementations, rendering logic, event handling, and auxiliary features such as file upload simulation, scroll management, and voice/video calling.
This article demonstrates how to create a minimal Super Mario‑style platformer using JavaScript, LeaferJS for graphics rendering, and Vue for UI and map editing, covering background looping, scene management, sprite classes, a simple physics engine with gravity, collision detection, jumping, camera follow, scoring, and a basic victory condition.
This article explains how to simplify SVG hover color changes in Vue by creating a reusable custom directive that dynamically modifies the fill attribute or swaps SVG markup, reducing duplicated markup and improving maintainability for both simple and complex SVG graphics.
This article explains how to build a custom step‑progression UI component in Vue, first using a simple flex layout and then enhancing it with a grid‑based S‑shaped design to support flexible step ordering and dynamic status rendering based on backend data.
This article explains the inner workings of Vue's nextTick function, detailing its callback queue, flushing logic, timer selection across environments, Promise‑based return, and provides a step‑by‑step JavaScript implementation with test cases and the full Vue source code.
This article compares three real-time data update techniques—short and long polling, WebSocket, and Server‑Sent Events—explaining their principles, advantages, drawbacks, and providing practical Vue and Node.js code examples to help developers choose the optimal solution for their specific use case.
This tutorial explains how to build a seamless carousel in Vue by dynamically switching a data list, using the Transition component for enter/leave animations, adding an auto‑play timer, handling hover pause/resume, and solving visibility‑change flicker with concise CSS and JavaScript code.
This article provides a comprehensive guide to using JSX/TSX in Vue 3, covering project setup, the defineComponent API, option and function syntax, data binding, event handling, slots, scoped CSS, and various approaches to defining and simplifying props with TypeScript.
This article explains how to make an Element UI el-select component automatically expand its width to fit long option labels by leveraging the prefix slot, adjusting CSS positioning, and adding minimum width handling, providing complete Vue template, script, and style code examples.
This article explains how VueUse's createGlobalState leverages Vue's effectScope to provide global state sharing across components, compares it with a straightforward closure approach, and discusses the practical implications of using effectScope for dependency collection and cleanup in frontend development.
This article explains how to use the unplugin-auto-import plugin to automatically import Vue core functions, Naive UI components, and other libraries in a Vue 3 + Vite + TypeScript project, reducing repetitive import statements and improving code readability.
This article explains how to create a robust Vue 3 form component using Element Plus, covering component hierarchy, data binding with model, rule definition with async-validator, provide/inject communication, and step‑by‑step validation logic with practical code examples.
This guide walks you through organizing a Vue 3 application, starting with the default Vue CLI layout and progressively adding optimized folders such as assets, components, views, router, store, composables, services, and types, while offering practical tips for naming, lazy loading, and modularization to keep projects scalable and maintainable.
For small front‑end projects, the Vite + Svelte stack replaces heavyweight Vue with a lightweight solution that delivers near‑instant hot‑module replacement, 38 % smaller bundles, roughly 46 % faster first‑contentful‑paint and 14 % quicker startup, while requiring only a few days to become productive.
This article explains what constitutes a large file, contrasts its upload challenges with ordinary files, outlines the chunked upload workflow for both front‑end and back‑end, and provides practical code examples and optimization techniques such as resumable uploads, instant upload, progress tracking, and pause/resume functionality.
This article explains the differences between Monorepo and Multirepo architectures, reviews popular Monorepo tools, and provides a detailed step‑by‑step guide to building a Vue‑based Monorepo project using pnpm Workspaces, including workspace configuration, shared package creation, and dependency management.
This article introduces Onionl-UI, a newly created Vue 3 component library, describing its motivation, current status, technology choices such as Vite and UnoCSS, directory layout, build configuration, component implementation, and unit testing with Vitest, offering a practical walkthrough for frontend engineers.
This article comprehensively outlines thirteen distinct methods for component communication in Vue 3, covering parent‑to‑child props, child‑to‑parent emits, sibling communication via mitt, $attrs, refs, v‑model, provide/inject, router parameters, Vuex, Pinia, browser storage, window object, and globalProperties, with concise code examples for each.
This article explains how to leverage the JavaScript CustomEvent API to create and dispatch custom events for efficient, decoupled communication between components in complex React and Vue applications, providing syntax details, practical code examples, and guidance on appropriate usage scenarios.
This article details the design, data structure, and implementation of a reusable conditional filter tree component using Vue2 and Vue3, covering node addition, deletion, relationship handling, form validation, and provide/inject communication, along with code examples and discussion of challenges and future improvements.
This article introduces three lesser‑used Vue.js built‑in directives—v‑once, v‑pre, and v‑memo—explaining their purposes, underlying mechanisms, and providing practical code examples that demonstrate how they can improve rendering performance or bypass compilation when applied appropriately.
This article explains how to build a reusable Vue 3 component that draws customizable ring charts on a canvas, using TypeScript, props for size, stroke width, and a ratio list to render multiple colored arcs dynamically.
This article explains how to override the native localStorage and sessionStorage APIs in JavaScript, providing a flexible proxy layer that supports business‑specific logic, global monitoring, data protection, encryption, and configurable hooks, with practical Vue 3 integration examples.
This article documents several practical problems encountered when using the Wujie micro‑frontend framework—such as editor selection failures, PDF preview white screens, missing Element‑Plus styles, tooltip offsets, custom event loss, and global style pollution—and provides concrete reproduction steps and detailed solutions for each.
This article explains how to organize, import, dynamically load, batch import, and lazily load images in Vue 3 + Vite applications, covering static assets, CSS references, template usage, URL handling, import.meta.glob, and common pitfalls with path aliases.
This article explains how to create a reusable Vue hook that implements a virtual list, enabling efficient rendering of tens of thousands of rows by rendering only the visible items and handling both fixed‑height and variable‑height scenarios with caching and scroll calculations.
Vue’s reusable logic pattern, called Composables, are functions built with the Composition API that encapsulate reactive state via ref and lifecycle hooks, follow a use‑prefix naming convention, and let developers like the mouse‑tracker example share stateful behavior across components cleanly.
This article explains the pain points of multiple logins in enterprises, introduces Single Sign‑On concepts and protocols, outlines its benefits, and provides a step‑by‑step guide to deploy an open‑source Golang‑Vue SSO solution using Docker Compose.
This tutorial demonstrates how to record and display website visitor statistics by using a Spring Boot backend with an IP‑based visitor identifier, a custom @VisitLog annotation, a MySQL visit‑log table, and a Vue front‑end component that shows PV and UV counts.
This article explains the concept of Server‑Side Rendering (SSR), why it improves SEO and first‑paint performance, compares popular SSR‑compatible frameworks, and provides a step‑by‑step guide for initializing a Nuxt project, configuring routing, SEO, styling, data fetching, state management, and extending functionality with modules.
Vue 2 implements reactivity by adding individual getters and setters with Object.defineProperty, which works for existing properties but struggles with many fields and dynamic changes, whereas Vue 3 uses a Proxy to intercept all operations on an object, delivering higher performance, automatic handling of added or removed properties, and greater flexibility for complex data structures.
Learn how to use the lightweight Jpom automation tool to set up Docker‑based CI/CD pipelines, configure repositories, build and package a Spring Boot 3 + Vue e‑commerce project, and deploy both backend and frontend services seamlessly on a Kubernetes‑ready environment.
This article explains why many admin frameworks ignore 403 pages, compares common handling strategies, and presents a practical solution that replaces the component of unauthorized routes with a dedicated 403 component while preserving the original URL, complete with code examples and visual demos.
The latest Layui release upgrades several core packages, introduces new components such as timeSelect, segmented and enhanced datePicker features, adds VNode support for titles and footers, renames global variables, and resolves a long list of bugs across many UI components.
This article explains why using :key="index" in Vue v-for loops is problematic, describes the virtual DOM compilation process, demonstrates the diff algorithm with examples, and provides best practices for key usage to improve rendering performance.
This guide walks developers through rapidly onboarding a SpringBoot 3 and Vue‑based e‑commerce system, covering project overview, setup, core features, technology stack, business logic, deployment, and extending the code for new requirements.
This article evaluates and compares several Vue 3 + Vite based backend administration systems, outlining selection criteria such as star count, recent activity, documentation, UI library support, layout options, navigation features, internationalization, and other functional aspects to help developers choose the most suitable admin panel.
This article provides a detailed tutorial on iframe usage in web front‑end development, covering responsive sizing based on the parent window, dynamic height adjustment via postMessage, handling HTTP/HTTPS mismatches, cross‑origin issues, and security considerations such as X‑Frame‑Options.
This guide walks you through installing and running CasbinStarterKits—a PHP‑Casbin starter kit built on Laravel‑Authz with a Vue 3 and Tailwind CSS front‑end—covering prerequisites, repository cloning, dependency installation, database migration, and accessing the demo with default credentials.
This tutorial walks through setting up a Vue2 front‑end environment, installing Node.js, Vue‑CLI, Element UI, and Axios, then creates a reusable hot‑search board component, integrates it into the main app, and even shows a Java‑based Zhihu crawler for data collection.
This article explains how to create a highly customized table composed of three synchronized Element UI tables in Vue, covering coordinated scrolling, dynamic info‑bar positioning, floating operation columns, style overriding, and performance considerations with code examples.
This article reviews the recent deprecation of react‑beautiful‑dnd and presents several modern front‑end drag‑and‑drop alternatives—including Pragmatic Drag and Drop, VueDraggablePlus, dnd‑kit, react‑dnd, and Swapy—while offering migration strategies, usage examples, and GitHub resources for each library.
After six months of using AI to generate front‑end code for internal admin panels, the team found API typings perfect but UI components frequently flawed, leading them to adopt a key‑based modular strategy that replaces code‑subtraction with code‑addition, leverages reusable component libraries, and uses regex/AST fixes to reliably meet internal standards.
This tutorial introduces common icon approaches, explains the Unocss icon scheme built on SVG and Iconify, and provides step‑by‑step instructions—including Vite project setup, configuration files, and usage examples—to help front‑end developers efficiently add scalable, color‑aware icons to Vue applications.
Vue 3.5 introduces version counting and a bidirectional linked‑list to optimize lazy updates, using a globalVersion counter, dep.version tracking, and batch processing to efficiently determine when computed and effect functions need recomputation, reducing memory usage and unnecessary calculations.
This article systematically introduces the many ways to write Vue components—including the classic Options API, the modern Composition API with setup syntax sugar, hand‑written render functions using h or createVNode, and various JSX techniques—explaining their principles, code examples, and when to choose each approach.
This article explains why the native storage event only works across different tabs, evaluates traditional polling and proxy approaches, and presents four efficient solutions—including custom StorageEvent, CustomEvent, MessageChannel, and BroadcastChannel—along with practical React and Vue examples for real‑time localStorage monitoring.
By binding a Vue single‑file component’s AST to a visual UI, this project parses templates with node‑html‑parser, transforms scripts via Babel, and processes styles with standard loaders, allowing developers to edit component properties visually, automatically regenerate synchronized source code, and preview changes, with a prototype demo and planned drag‑and‑drop, styling, state, AI, and CI/CD extensions.
This comprehensive tutorial walks through Pinia's core concepts—including stores, defineStore, reactive integration, devtools, plugins, TypeScript support, SSR handling, and mapping helpers—providing step‑by‑step code examples and detailed explanations for building robust Vue 3 applications.
This article analyzes common misuse of Vue 3's watch for handling both synchronous and asynchronous updates, demonstrates how excessive watchers create spaghetti code, and shows how refactoring with computed can streamline logic, improve maintainability, and help new team members onboard faster.
This article explains the problems of using deprecated deep combinators in Vue scoped CSS, shows concrete code examples, walks through the Vue compiler’s AST transformation, demonstrates the correct :deep() syntax, and proves that nested :deep selectors are not supported.
This article explains how to use Vue 3's ref and shallowRef for reactive state, demonstrates one‑way data flow between parent and child components via props and events, and introduces a custom useRefState composable that mimics React's useState for cleaner state management.
This article explains what Hooks are, demonstrates how to use them in Vue 3, and guides readers through building reusable custom Hook functions such as useMouse and useTable, covering pagination, parameter handling, and best practices for clean, maintainable frontend code.
This article introduces the drag-kit library, explains why it is a good choice for high‑performance, cross‑iframe, responsive drag‑and‑drop interactions, provides quick‑start code examples, details its core features and advanced options, and shows how to integrate it with Vue, React and vanilla JavaScript.
This article presents a comprehensive solution for integrating ECharts into Vue and React projects, addressing bundle size, API complexity, and lack of CSS‑variable support by introducing custom imports, a draw helper, MutationObserver‑based resizing, theme‑aware color replacement, lazy loading, and usage examples for both frameworks.
This tutorial shows how to collect, configure, and customize reusable VSCode code snippets for JavaScript, TypeScript, Vue, Java and other languages, enabling developers to replace repetitive boiler‑plate with a single click and tailor placeholder behavior to their workflow.
This article walks through creating a Vue component library using Vite, reorganizing the project structure, configuring aliases, writing reusable components with a global install helper, setting up routing, customizing Vite build outputs, generating TypeScript declarations, and documenting the library with VitePress.
To simplify large‑scale Vue upgrades such as Vue 2→Vue 3, Webpack 4→Webpack 5, or migration to Vite, the author presents an automated AST‑based migration scaffold that parses JavaScript, Vue, and style files, applies transformation rules with GoGoCode and PostCSS, and rewrites code, reducing manual effort and error risk.
