Tag

Vue3

1 views collected around this technical thread.

Didi Tech
Didi Tech
Jun 12, 2025 · Frontend Development

Dimina: Open‑Source Cross‑Platform Mini‑Program Framework for Front‑End Dev

Dimina, Didi’s newly open‑sourced mini‑program framework, combines Vue 3 with a custom compiler to translate mini‑program syntax into native apps, offering a modular, high‑performance, cross‑platform solution that lets developers write a single codebase for Android, iOS, Harmony, and Web, complete with extensive component and API libraries.

Cross-PlatformDiminaOpen-source
0 likes · 7 min read
Dimina: Open‑Source Cross‑Platform Mini‑Program Framework for Front‑End Dev
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Jun 11, 2025 · Frontend Development

How to Build a Custom Vue3 Auto‑Scrolling Table Directive with Element‑Plus

This article explains how to create a custom Vue 3 directive for automatic scrolling of Element‑Plus tables, covering the underlying logic, handling mouse events, conditional scrolling, and integration steps with code examples, enabling developers to implement smooth list carousels without third‑party plugins.

Auto-ScrollDirectiveElement-Plus
0 likes · 8 min read
How to Build a Custom Vue3 Auto‑Scrolling Table Directive with Element‑Plus
IT Services Circle
IT Services Circle
May 17, 2025 · Frontend Development

Essential Vue3 Ecosystem Tools and Their Installation Guides

This article introduces a curated collection of Vue 3 ecosystem tools—including create‑vue, TypeScript support, vue‑router, Pinia, Vite, VueUse, ESLint/Prettier, UnoCSS, UI component libraries, debugging plugins, uni‑app, electron integration, VitePress, and Nuxt—providing concise descriptions and npm installation commands to help developers quickly set up modern front‑end projects.

NuxtPiniaTypeScript
0 likes · 8 min read
Essential Vue3 Ecosystem Tools and Their Installation Guides
Full-Stack Internet Architecture
Full-Stack Internet Architecture
May 14, 2025 · Backend Development

Handling CORS in Spring Boot and Vue3: Concepts, Code, and Demo

This article explains the concept of Cross‑Origin Resource Sharing (CORS), demonstrates how to identify cross‑origin requests, and provides a complete Spring Boot backend configuration together with Vue3/Axios frontend code to solve CORS issues in a full‑stack web application.

AxiosCORSCross-Origin
0 likes · 9 min read
Handling CORS in Spring Boot and Vue3: Concepts, Code, and Demo
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Apr 26, 2025 · Frontend Development

Decentralized Micro‑Frontend Architecture with Vite Module Federation in Vue 3

This article explains how to build a decentralized micro‑frontend system for Vue 3 using the Vite‑based @originjs/vite-plugin-federation, covering architecture concepts, configuration, dynamic module loading, shared routing, state management with Pinia, and deployment strategies, complete with code examples.

Vue3dynamic loadingfrontend
0 likes · 15 min read
Decentralized Micro‑Frontend Architecture with Vite Module Federation in Vue 3
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Apr 20, 2025 · Frontend Development

Vue 2.0 vs Vue 3.0: Core Differences, Reactive System, Composition API, Lifecycle Hooks and Practical Code Examples

This article provides a comprehensive comparison between Vue 2 and Vue 3, covering changes in reactivity implementation, the introduction of the Composition API, lifecycle hook updates, component caching, data binding techniques, state‑management alternatives, storage options, and numerous code snippets that illustrate each concept for developers preparing for interviews or upgrading projects.

Composition APIJavaScriptVue
0 likes · 25 min read
Vue 2.0 vs Vue 3.0: Core Differences, Reactive System, Composition API, Lifecycle Hooks and Practical Code Examples
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Apr 14, 2025 · Frontend Development

Using AirPower i18n Module for Frontend Internationalization with TypeScript

This tutorial demonstrates how to install the AirPower package, create a custom i18n class, add default and English language packs, register languages, and use type‑safe i18n tags in a Vue3 frontend, while also outlining the broader AirPower ecosystem and future plans.

AirPowerInternationalizationTypeScript
0 likes · 6 min read
Using AirPower i18n Module for Frontend Internationalization with TypeScript
iQIYI Technical Product Team
iQIYI Technical Product Team
Apr 10, 2025 · Frontend Development

Design and Implementation of a Customizable Data Visualization Platform for Tianji Business

The Tianji team built a no‑code, component‑based visualization platform using Vue3 and Echarts, where a DSL defines reusable chart cards, tables and other widgets that users drag‑and‑drop onto a 24‑column grid, enabling real‑time, permission‑controlled, personalized dashboards that have already produced over 300 dashboards and 6,000 components for growth operations.

DSLData VisualizationECharts
0 likes · 18 min read
Design and Implementation of a Customizable Data Visualization Platform for Tianji Business
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Mar 21, 2025 · Frontend Development

Component Communication in Vue 3: Props, Emit, Sibling Communication, Event Bus, Pinia, Provide/Inject, and Ref

This article provides a comprehensive guide to Vue 3 component communication, covering parent‑to‑child props, child‑to‑parent emit, sibling communication via parent mediation, event bus, Pinia state management, provide/inject, shared reactive objects, and component instance references, with code examples and a comparison table.

EmitPiniaProps
0 likes · 13 min read
Component Communication in Vue 3: Props, Emit, Sibling Communication, Event Bus, Pinia, Provide/Inject, and Ref
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Feb 9, 2025 · Frontend Development

A Comprehensive Guide to Using Pinia for State Management in Vue 3

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.

JavaScriptPiniaVue
0 likes · 9 min read
A Comprehensive Guide to Using Pinia for State Management in Vue 3
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Jan 17, 2025 · Frontend Development

Advanced Vue 3 Reactive APIs: shallowRef, triggerRef, customRef, shallowReactive, toRaw, markRaw, and shallowReadonly

This article explains several advanced Vue 3 reactivity APIs—including shallowRef, triggerRef, customRef, shallowReactive, toRaw, markRaw, and shallowReadonly—detailing their differences from standard refs, performance benefits, usage patterns, and providing complete TypeScript code examples for each.

ReactivityVue3customRef
0 likes · 11 min read
Advanced Vue 3 Reactive APIs: shallowRef, triggerRef, customRef, shallowReactive, toRaw, markRaw, and shallowReadonly
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Dec 17, 2024 · Frontend Development

13 Ways to Pass Data Between Components in Vue 3

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.

JavaScriptVueVue3
0 likes · 14 min read
13 Ways to Pass Data Between Components in Vue 3
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Dec 15, 2024 · Frontend Development

Integrating Echarts into UniApp Mini‑Programs: Vue2 and Vue3 Implementation Guide

This tutorial consolidates the fragmented knowledge about using Echarts in UniApp mini‑programs, detailing library choices, installation steps, complete code examples for both Vue2 and Vue3 projects, and common pitfalls with practical solutions.

ChartingEChartsMiniProgram
0 likes · 12 min read
Integrating Echarts into UniApp Mini‑Programs: Vue2 and Vue3 Implementation Guide
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Dec 11, 2024 · Frontend Development

Implement Click-to-Scroll to Current User Position in a Vue3 Ranking List

This tutorial explains how to use Vue 3 to render a ranking list, add a unique data-key to each user item, and implement a click handler that smoothly scrolls the selected user into view with Element.scrollIntoView while optionally highlighting the element for two seconds.

DOMHighlightJavaScript
0 likes · 5 min read
Implement Click-to-Scroll to Current User Position in a Vue3 Ranking List
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Dec 1, 2024 · Frontend Development

Migrating a Vue2 Project to Vue3 with Pinia and Composition API

This article details a step‑by‑step migration from Vue 2 to Vue 3, emphasizing the use of the latest Vue 3 version, TypeScript typings, replacing mixins with composition functions, adopting Pinia for state management, and demonstrating how to share and protect reactive state with composition APIs.

Composition APIPiniaTypeScript
0 likes · 8 min read
Migrating a Vue2 Project to Vue3 with Pinia and Composition API
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Nov 3, 2024 · Frontend Development

Performance Optimization of a Complex Real‑Time Table in a Financial Front‑End Application

This article details how a newly‑graduated front‑end developer tackled severe UI lag and ten‑second first‑screen loads caused by three synchronized tables with 400+ rows of real‑time data, using Vue 3 techniques such as consolidated scroll handling, viewport‑based lazy updates, throttling, and WebSocket‑driven data subscription.

Vue3WebSocketlazy-loading
0 likes · 16 min read
Performance Optimization of a Complex Real‑Time Table in a Financial Front‑End Application
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Oct 23, 2024 · Frontend Development

Building a Kirby‑Themed Animated Input Component with Vue 3 and GSAP

This tutorial demonstrates how to create a Vue 3 component that animates a Kirby‑styled input field using GSAP, covering SVG drawing, component structure, animation timelines, regex‑based state handling, and integration of styles and interactions for a visually engaging form element.

GSAPSVGVue3
0 likes · 28 min read
Building a Kirby‑Themed Animated Input Component with Vue 3 and GSAP
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Oct 2, 2024 · Frontend Development

Understanding Vue 3 ref, computed, and reactive: Definitions, Usage, and Best Practices

This article explains the purpose and internal implementation of Vue 3’s ref, computed, and reactive APIs, compares their behaviours in script and template contexts, discusses watch strategies, and offers practical guidelines for choosing and modularising these reactive primitives in large‑scale frontend projects.

ReactiveVue3Watch
0 likes · 16 min read
Understanding Vue 3 ref, computed, and reactive: Definitions, Usage, and Best Practices
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Sep 28, 2024 · Frontend Development

Our Team’s Journey with Vue 3 Composition API and Insights from ECS Architecture

The article recounts a frontend team's evolution from Vue 2 to Vue 3, detailing their experiments with the script‑setup syntax, challenges of maintainability, and how concepts from game‑engine ECS architecture inspired new composition‑API best practices for scalable, readable code.

Composition APIECSTypeScript
0 likes · 14 min read
Our Team’s Journey with Vue 3 Composition API and Insights from ECS Architecture
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Aug 17, 2024 · Frontend Development

Implementing Scroll-Driven Animations in Vue3 with Throttling for Performance

This article explains how to create Apple‑style scroll‑driven line and list‑item animations in a Vue3 website by using a normalized scroll formula, adjusting it for specific sections, and applying a throttle algorithm to keep the animations smooth and performant.

JavaScriptScroll AnimationVue3
0 likes · 8 min read
Implementing Scroll-Driven Animations in Vue3 with Throttling for Performance