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.
This article demonstrates how to create a reusable Vue 3 component with Vite and Element‑Plus, covering two‑way data binding via v‑model, slot forwarding using the h function, and exposing child component refs through a Proxy, complete with code examples and explanations.
This article walks through a zero‑to‑one charging‑station system built with Spring Cloud microservices, Vue front‑end, and a suite of enterprise features such as distributed locks, idempotency, multi‑level caching, and custom starters, providing concrete design documents and module breakdowns to help candidates showcase real project experience in interviews.
This article walks through building a 1v1 WebRTC audio/video call demo with Vue, explains the underlying PeerConnection setup, media control, and datachannel messaging, then expands to discuss real‑world challenges, adaptive solutions, and compares Mesh, SFU, and MCU multi‑party architectures.
This article provides a comprehensive guide to using Vue Flow—a lightweight Vue 3 component library—for building dynamic flowcharts, covering installation, core concepts such as nodes, edges and handles, theme customization, composables, controlled flow demos, and detailed code examples.
This document describes a web‑based contract and employee expense reimbursement system for small‑to‑medium enterprises, covering its BS architecture with a Vue front‑end, Django back‑end, MySQL database, deployment environment, registration/login procedures, and detailed modules for user, department, contract, reimbursement, and financial management.
This article explains how Vue2 and Vue3 rewrite array methods to achieve reactivity, compares Object.defineProperty with Proxy, demonstrates common pitfalls such as includes and push causing infinite loops, and provides practical code examples for both versions.
This article explains how the vueuse utility library works with both Vue 2 and Vue 3 by leveraging the vue‑demi compatibility layer, and then dives into the implementation of its useDark hook, showing the underlying media‑query logic and CSS techniques for dark‑mode support.
This article explains the concept of virtual scrolling, why it is needed for performance in web pages, outlines two main implementation strategies, and provides detailed Vue‑based code examples—including Element‑Plus Infinite Scroll and a custom VirtualList class—to help developers apply the technique effectively.
This article introduces a graduation project that creates an interactive smart campus 3D scene using three.js and Vue, provides demo links, outlines core features, offers a quick‑start guide, and gives detailed explanations of each module, modeling conventions, and performance tips.
This article explains why ESLint is essential for front‑end code quality, describes its core features, and provides a detailed five‑step process for integrating ESLint into Vue 3 projects, followed by deeper integration techniques for Vite, Webpack, CI/CD pipelines, Git hooks, and IDEs, complete with practical code examples and troubleshooting tips.
This article describes a complete solution for creating a PDF contract electronic signature system using Vue for the front‑end rendering, pdfjs‑dist to extract predefined form fields, and pdf‑lib on the back‑end to generate a signed PDF, covering field extraction, coordinate conversion, canvas overlay, and server‑side PDF manipulation.
This article explains how to fetch an HTML string from an API and display it either via an iframe or by rendering the HTML directly in React or Vue, and provides multiple download options—including saving the raw HTML, capturing an image with html2canvas, and generating a PDF using jsPDF.
This article explains how to create a reusable Vue calendar component by designing its data structure, generating a 7×6 date matrix, implementing navigation props and events, and applying customizable styles, providing complete code examples for template, script, and scoped CSS.
This article describes how a legacy Vue2‑based cloud management system was profiled with Lighthouse and webpack‑bundle‑analyzer, then optimized through static asset compression, dead‑code removal, tree‑shaking, code‑splitting, async loading and server tweaks, achieving a three‑fold reduction in bundle size and a 13.6‑second improvement in first‑contentful‑paint time.
This article walks through the design and implementation of a configurable dynamic form in Vue, covering user‑side API design, type definitions, enhanced next‑function logic, recursive component rendering, and a complete example with code snippets to illustrate building and using the form component.
This article provides a comprehensive comparison between Vue 2 and Vue 3, detailing their architectural differences, new features such as the Composition API, TypeScript support, fragments, teleport, suspense, virtual‑DOM optimizations, and guidance on state management, build tools, and migration strategies.
This article explains the shortcomings of the native HTML title attribute for hover text and provides a step‑by‑step guide, with pure HTML/CSS/JavaScript and Vue examples, to create a customizable tooltip that only appears when the text overflows, improving both style and functionality.
This article introduces a lightweight admin dashboard template built with Vue 3.4, Element‑plus, and Vite, detailing its project structure, technology stack, coding standards, configuration files, component integrations such as UnoCSS, mock.js, canvas, SVG and WangEditor, and provides step‑by‑step commands for development, linting, formatting, and production build.
AS-Editor is a Vue-powered visual drag‑and‑drop page builder that generates UI from JSON, offering installation via npm, step‑by‑step usage with customizable components, and an open‑source repository for enhancing front‑end development efficiency, even in mobile projects.
The article details how the author leveraged Doubao MarsCode's AI‑powered online IDE to quickly set up a Vue3 project, import a git repository, switch Node versions, install dependencies, develop a paginated carousel component with full code snippets, and evaluate the platform's strengths and weaknesses.
This article demonstrates how to implement a high‑performance file upload system using Vue's Element Plus component on the frontend and Spring Boot on the backend, comparing single‑row inserts, batch inserts, and a multithreaded producer‑consumer approach to dramatically reduce MySQL insertion time.
This guide walks through setting up Jenkins with Docker Compose, installing Node.js, configuring npm to use the Taobao mirror, and creating a Jenkins pipeline to compile and package a Vue application, including troubleshooting tips for common errors.
This tutorial demonstrates how to create an interactive Echarts map that supports drill‑down to county level and back navigation using Vue 3, vue‑echarts, and Vite, covering data acquisition, option configuration, event handling, and full component code.
This article describes how to build a reusable Vue component that automatically moves overflow menu items into a "More" dropdown, calculates the cutoff point based on container width, and updates the layout on resize, providing a smooth and responsive navigation experience.
This article reviews the ten most valuable JavaScript libraries for 2024—including React, Redux, D3.js, TensorFlow.js, Angular, Node.js, Vue, Svelte, Three.js, and Lodash—detailing their core features, performance benefits, typical use cases, and why they remain essential tools for modern frontend development.
