Vite's Hot Module Replacement (HMR) feature works well with Vue.js applications. Here are some key points about Vite's HMR and Vue.js:
Key Points:
1. First-Party Integration:- Vite provides first-party HMR integrations for Vue Single File Components and React Fast Refresh. This means that Vue.js applications can leverage Vite's HMR capabilities without additional setup[1][2].
2. Vue Plugin:
- For Vue.js applications, it is recommended to use the official @vitejs/plugin-vue plugin. This plugin provides Vue 3 specific features including HMR, global component resolving, directives, and slots[1][2].
3. Custom Configuration:
- If using JSX without React or Vue, custom `jsxFactory` and `jsxFragment` can be configured using the `esbuild` option. For example, for Preact, you can configure these in the `vite.config.js` file[1][2].
4. Troubleshooting:
- If HMR is not working in the browser, ensure that the plugin order is proper in the `vite.config.js` file. Disabling vite-plugin-checker can also help resolve issues[3].
5. Integration with Third-Party Libraries:
- To add HMR to Vue components which are loaded from a third-party library, you need to add the library to aliases in the `vite.config.js` file. This ensures that Vite can correctly detect and update the components during HMR[4].
Conclusion:
Vite's HMR feature is designed to work seamlessly with Vue.js applications. By using the official Vue plugin and configuring the `jsxFactory` and `jsxFragment` options, you can ensure that HMR works correctly in your Vue.js project. Additionally, troubleshooting and integrating third-party libraries can help resolve any issues that may arise during HMR setup.Citations:
[1] https://v3.vitejs.dev/guide/features
[2] https://vitejs.dev/guide/features
[3] https://stackoverflow.com/questions/74625283/vue3-vite-hot-reload-hmr-no-working-in-the-browser
[4] https://github.com/vitejs/vite/discussions/7211
[5] https://inspector.dev/how-to-make-vite-hot-module-replacement-work-on-windows/