Home Arrow Icon Knowledge base Arrow Icon Global Arrow Icon Does Vite's HMR work well with Vue.js applications


Does Vite's HMR work well with Vue.js applications


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/