1 views collected around this technical thread.
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 article explains how to develop a custom plugin that automatically captures Git metadata during build time, injects it into the bundled code, and exposes the information via a console command, with step‑by‑step guidance for both Webpack and Vite projects using Trae‑Builder.
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.
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.
This article introduces the auto-i18n-translation-plugins, a framework‑agnostic Vite/Webpack plugin that automatically extracts Chinese text from source code, replaces it with hash‑based $t calls, generates language packs, and seamlessly translates new or incremental strings using configurable translators such as Youdao or Google.
The article introduces auto‑i18n‑translation‑plugins, a Babel‑based automatic internationalization plugin for frontend projects that works with Vite and Webpack, detailing its features, installation, configuration options, translator setup, usage examples, and best practices for generating multilingual JSON translation files without modifying business code.
This article guides pure frontend developers with little or no Node.js experience through the fundamentals of creating Vite plugins, covering concepts such as code injection, file operations, and file routing, and provides practical examples and best‑practice tips to enhance development efficiency.
This article demonstrates how to create a "dist‑info" plugin compatible with Webpack and Vite that automatically injects Git metadata into the built HTML, using the AI‑assisted Trae IDE to scaffold the project, write core code, and publish the package to GitHub and npm.
This article explains how to reduce bundle size and improve load speed of large micro‑frontend projects by sharing common dependencies through CDN externalization, using tools such as qiankun, vite‑plugin‑cdn‑import, and Rollup plugins for HTML generation.
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.
This article explains how to create a custom PostCSS plugin for Vite that converts pixel units to viewport width units, covering meta tag setup, plugin configuration, TypeScript implementation, handling multi‑value properties, and troubleshooting conversion issues.
This tutorial walks you through setting up a Laravel project, installing Laravel Breeze, configuring Vite for Vue.js, creating a TaskList component, registering it in the Blade template, and running the development server to see a responsive Vue‑driven task manager.
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.
The article introduces code‑inspector‑plugin, an open‑source plugin for bundlers like webpack, Vite, and Rspack that lets developers click a DOM element in the browser to instantly open the corresponding source file in their IDE, detailing installation, configuration, usage, implementation principles, and common troubleshooting tips.
This article reviews seven leading front‑end open‑source projects for 2025—Vite, Bun, React 19, Next.js 15, Solid.js, Tailwind CSS, and Astro—highlighting their key features, integration capabilities, and ideal use‑cases for modern web development.
This article provides a detailed walkthrough of Vite's configuration options, covering development server setup, path aliasing, TypeScript support, plugin integration, environment variable handling, CSS pre‑processor settings, dependency pre‑bundling, production build tweaks, and advanced code‑splitting strategies for modern frontend projects.
During development of a micro‑frontend project using wujie, the child app required port 5173 for communication, but newly created Vite React‑TS projects failed to auto‑increment the port, revealing that Vite’s port‑detection logic also depends on the host setting, not just the port number.
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.
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 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.