Vue3 project scaffolding

The Vue 3 project scaffolding is a crucial tool in modern front-end development. Solutions based on Vite or Vue CLI can quickly generate project structures and integrate common technology stacks. Vite, with its blazing-fast build speed and simple configuration, has become the preferred scaffolding tool for Vue 3, while Vue CLI remains competitive due to its mature ecosystem. This article provides a detailed comparison of the two, covering aspects such as build speed, configuration complexity, and plugin ecosystems. It includes specific commands for creating projects with Vite and typical directory structures, demonstrating the integration of core modules like routing configuration and state management. Advanced customization techniques are also introduced, such as multi-environment configuration, custom plugin development, and performance optimization practices. For enterprise-level projects, a domain-driven design structure is recommended, along with configuration solutions for automated scripts, code standards, testing environments, and continuous integration. Finally, the article covers extended features like micro-frontends, internationalization, theme switching, and component auto-import, offering comprehensive guidance for developers to build modern Vue 3 applications.

The Vite build tool translates this sentence into English.

Vite is a modern front-end build tool developed by Evan You, leveraging native ES modules in browsers and esbuild to deliver an ultra-fast development experience. Its core advantage lies in its development server design, which directly utilizes ES Modules support to achieve cold-start times independent of project size, on-demand compilation, and rapid hot module replacement. Project initialization is straightforward, with configuration following the convention-over-configuration principle, offering fast HMR and dependency pre-bundling. For production, it uses Rollup for bundling with automatic optimizations, supporting code splitting and asset compression. Vite deeply integrates with Vue, supporting Single-File Components and custom block handling, while providing advanced features like CSS processing and static asset imports. Performance optimizations include dependency optimization, chunking strategies, and asynchronous loading, seamlessly integrating with tools like Vue Router and Pinia. Debugging is facilitated with detailed logs, and it supports custom development servers and multi-page application configurations, making it an ideal tool for enhancing modern front-end development efficiency.

Compiler macros (defineProps/defineEmits, etc.)

Vue 3's `<script setup>` syntactic sugar introduces compiler macros like `defineProps` and `defineEmits`, providing type-safe declaration methods for core functionalities. These macros are only available within the `<script setup>` context and do not require explicit imports. `defineProps` supports both runtime and type declarations, with type declarations requiring TypeScript. Default values can be set using `withDefaults`. Similarly, `defineEmits` supports both declaration methods, with type declarations enabling strict parameter validation. These macros are entirely removed during compilation, resulting in no runtime overhead. Compared to the Options API, compiler macros offer a more concise syntax and can integrate with TypeScript's advanced type features. In practical development, they can be used alongside other compiler macros, such as in form components, with IDEs providing comprehensive type hints and code completion. There are usage limitations—for instance, props or emits cannot be dynamically defined. Compared to React, Vue's compiler macros offer tighter template integration. Performance-wise, since they are processed at compile time, there is no runtime cost. When migrating from Vue 2, they can gradually replace Options API. Testing requires special attention to handling emit calls. These macros also seamlessly integrate with other Vue features like `watch` and `provide`. Type definitions can be exported and reused.

Effect scope API

Vue 3's Effect Scope API provides a way to organize and manage side effects, allowing developers to create independent effect scopes and manually control their execution and stopping. The basic usage involves creating a scope using the `effectScope` function, where multiple side effects can run. Nested scopes inherit the behavior of their parent scope—stopping a parent scope also stops its child scopes. Practical applications include usage within components and composable function development. Advanced techniques involve isolating scopes, checking state, integrating with Suspense, performance optimization, and integrating with Pinia. For debugging, scopes can be named. Key considerations include that a scope can only be stopped once and cannot run new side effects after stopping. Compared to traditional approaches, effect scopes offer more centralized management, built on Vue's reactivity system. Testing should verify whether side effects are properly stopped. During migration, they can replace Vue 2's watcher management. Common issues include improperly stopped scopes and handling asynchronous side effects. Best practices recommend creating independent scopes per functional unit, returning a `stop` method, using meaningful names, avoiding running new side effects in stopped scopes, and considering `onScopeDispose` for cleanup.

Custom element interaction

The interaction between Vue.js and custom elements involves several key aspects, including registration and usage methods, the distinction between global and local registration, differences between custom elements and Vue components, attribute passing mechanisms, variations in event handling, implementation of slot content distribution, lifecycle comparisons, style encapsulation approaches, integration of third-party elements, performance optimization strategies, testing methods, practical use cases, advanced integration patterns, browser compatibility, state management, dynamic elements, Vue 3 Composition API support, server-side rendering considerations, and accessibility support. These aspects provide developers with comprehensive guidance for effectively using custom elements in Vue applications.

Server-side rendering API changes

The Vue.js server-side rendering API underwent significant adjustments during version iterations, with core logic migrated from `vue-server-renderer` to `@vue/server-renderer`. The underlying implementation mechanism changed substantially, affecting isomorphic application lifecycle handling, state management, and rendering pipeline configuration. The renderer creation method was refactored: early versions used the `createRenderer` factory function to generate instances, while Vue 3 switched to ES module exports of standalone functions. The `bundleRenderer` concept was removed, directly rendering app instances instead. The template system is now controlled by the root component, and asynchronous rendering returns a `Promise` by default. Lifecycle hooks were adjusted: the server-specific hook `serverPrefetch` was renamed to `onServerPrefetch` and adapted to the Composition API style. The `beforeCreate` and `created` hooks were deprecated, with initialization logic to be migrated to `setup` or `<script setup>`. The state serialization mechanism changed: Vue 2 automatically serialized state via `context.renderState`, while Vue 3 requires explicit use of the `useSSRContext` composable function. Client-side hydration now requires manual state restoration. Async component handling was improved: the new SSR provides finer control over dynamically imported components, supporting separate loading logic for server and client, and compatibility with `Suspense` components and error boundaries. Streaming rendering APIs were upgraded: `renderToStream` was renamed to `renderToNodeStream`, and `renderToWebStream` was added to support the Web Streams API. Whitelist/blacklist configurations for client-sensitive directives were changed from string matching to regex. Performance tracing APIs were updated: the `context.rendered` callback was replaced with standalone APIs, adding metrics like component instantiation time. Error handling strategies were optimized: global `errorHandler` was replaced with error passing via render context, and new SSR-specific error types (e.g., component-level SSR errors) were introduced. Custom directives must explicitly declare `ssrRender`—unimplemented directives are ignored on the server. Compile-time configurations were adjusted: SSR-related options were moved to compiler settings. Hybrid rendering mode support was added: `renderToSimpleStream` enables initial SSR with subsequent CSR, suitable for progressive rendering of large static pages.

Transition animation system changes

The Vue.js transition animation system has undergone multiple version iterations, evolving from basic CSS class name control to flexible JavaScript hook integration. The class name mechanism shifted from a fixed structure to more semantic naming conventions, splitting initial and end states for more precise control. JavaScript hooks were enhanced with finer-grained callbacks to handle complex animation sequences. List transitions were improved by no longer rendering wrapper elements by default, and move-class support was added for smooth reordering. The Composition API integration introduced programmatic control via `useTransition`. Performance optimizations included caching mechanisms and explicit duration declarations. Collaboration with third-party libraries enabled complex animation orchestration, while custom directives allowed reusable animations. Responsive parameters dynamically adjusted animation properties based on data, and transition modes supported advanced usage. Animation lifecycle events were standardized to camelCase naming. These improvements have made animation handling more flexible and efficient.

Improvements in JSX syntax support

Vue.js version 3.2 introduced significant improvements to JSX syntax support, addressing many limitations of previous versions and enabling developers to use JSX in Vue more naturally and flexibly. The new version optimized foundational syntax support, automatically unwrapping ref values, improved component usage, and enabled more intuitive naming and prop passing. It also enhanced directive support, particularly for the `v-model` directive, and made slot syntax more straightforward. TypeScript type inference was refined, and deep integration with the Composition API was achieved. Performance optimizations significantly boosted rendering efficiency for large lists and complex component trees while maintaining strong compatibility with ecosystem tools like Vue Router and Vuex. Additionally, solutions for common issues and advanced usage patterns—such as render proxies and higher-order components—were provided. Through the Babel plugin, JSX transformation behavior can be configured. These enhancements make JSX a more powerful tool in Vue development.

Changes in the render function API

The Vue.js render function API has undergone multiple evolutions. In Vue 2.x, `createElement` was used as the render function parameter, receiving the tag name, data object, and child nodes. Vue 3.x introduced the more concise `h` function alias and flattened attribute handling. In the Composition API, the `h` function can be directly destructured from `setup` or imported for use. The VNode property structure was completely refactored in Vue 3, removing the `attrs` and `domProps` namespaces. Event listeners are now uniformly formatted as `onXxx`. Functional components no longer require the `functional` option and are instead defined as plain functions. Slot handling is unified into the third parameter as an object. New features include Fragment and Portal support. Custom directives are now passed as properties with a `v` prefix. The type system has been fully optimized to support TypeScript inference. Performance-wise, VNodes are now lighter, and static node hoisting is implemented. The template compilation output is closer to manually written render functions.

Changes to the Dynamic Components API

Vue 3 introduced significant changes to the dynamic component API by removing the implicit component registration logic of `component is` and enforcing explicit registration. A comparison between versions shows that Vue 2 allowed automatic component lookup, while Vue 3 requires explicit registration via the `components` option. It added direct support for async components and strictly standardized component naming formats. The migration strategy recommends adopting global registration or factory patterns. Advanced usage demonstrates management with the Composition API, while performance optimization suggests using `shallowRef` and `keep-alive`. The type system requires clear interface definitions. Common issues include handling API-returned component names and unknown component cases. It also covers render function syntax and integration with Vue Router. Finally, it presents an enterprise-level practice of a centralized component registry architecture.