{"id":12376,"library":"vite-plugin-vue-facing-decorator-hmr","title":"Vite Plugin for Vue Facing Decorator HMR Fix","description":"This Vite plugin addresses a known incompatibility between `vue-facing-decorator` and Vite's Hot Module Replacement (HMR) system when the `toNative()` method is omitted from Vue components. The `vue-facing-decorator` library typically requires calling `toNative()` on decorated components for HMR to function correctly, but this practice can severely degrade developer experience by breaking IDE features like auto-completion in environments such as WebStorm. This plugin, currently at version 1.0.1 (as of its initial release in 2024), transparently injects the necessary `toNative()` logic during the Vite build process, allowing developers to omit it from their source code, thereby preserving IDE functionality while maintaining HMR support. It offers a targeted solution for a specific development workflow challenge.","status":"active","version":"1.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/Arakmar/vite-plugin-vue-facing-decorator-hmr","tags":["javascript","vite-plugin","vue","sfc","js","typescript"],"install":[{"cmd":"npm install vite-plugin-vue-facing-decorator-hmr","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-vue-facing-decorator-hmr","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-vue-facing-decorator-hmr","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"This is a Vite plugin and requires Vite as a build tool dependency.","package":"vite","optional":false},{"reason":"The plugin specifically targets and fixes HMR issues for components using this decorator library.","package":"vue-facing-decorator","optional":false}],"imports":[{"note":"Vite configuration files (e.g., vite.config.js/ts) are typically ESM and use import statements.","wrong":"const vueFacingDecoratorHmr = require('vite-plugin-vue-facing-decorator-hmr');","symbol":"vueFacingDecoratorHmr","correct":"import vueFacingDecoratorHmr from 'vite-plugin-vue-facing-decorator-hmr';"}],"quickstart":{"code":"// vite.config.js or vite.config.ts\nimport { defineConfig } from 'vite';\nimport vue from '@vitejs/plugin-vue';\nimport vueFacingDecoratorHmr from 'vite-plugin-vue-facing-decorator-hmr';\n\nexport default defineConfig({\n  plugins: [\n    vue(),\n    vueFacingDecoratorHmr()\n  ]\n});","lang":"javascript","description":"This quickstart demonstrates how to integrate the plugin into your Vite configuration file to enable HMR for `vue-facing-decorator` components."},"warnings":[{"fix":"Install `vite-plugin-vue-facing-decorator-hmr` and add it to your Vite plugins, then remove manual `toNative()` calls from your component files.","message":"Vue components using `vue-facing-decorator` typically require `export default toNative(MyComp)` for Vite HMR to work. Omitting `toNative()` without this plugin will result in broken HMR.","severity":"gotcha","affected_versions":"All versions of `vue-facing-decorator` prior to using this plugin."},{"fix":"This plugin is designed to address this. Use the plugin and omit `toNative()` from your source code.","message":"Using `toNative()` directly in your `vue-facing-decorator` components can cause IDEs like WebStorm to break auto-completion and other language service features.","severity":"gotcha","affected_versions":"All versions of `vue-facing-decorator` when `toNative()` is explicitly used."}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `vite-plugin-vue-facing-decorator-hmr` is installed and added to your `vite.config.js`/`ts` plugins array. Remove any manual `toNative()` calls if you are using this plugin.","cause":"The `toNative()` method from `vue-facing-decorator` was not called on the component, or the `vite-plugin-vue-facing-decorator-hmr` plugin is not correctly configured.","error":"Hot Module Replacement (HMR) not working for Vue components using `vue-facing-decorator`."},{"fix":"Remove the `export default toNative(MyComp)` line from your component files. Install and configure `vite-plugin-vue-facing-decorator-hmr` in your Vite config to handle this automatically during the build process.","cause":"Explicitly exporting `toNative(MyComponent)` at the end of the component file interferes with the IDE's static analysis capabilities.","error":"IDE (e.g., WebStorm) reports 'Cannot resolve symbol 'MyProp'' or similar auto-completion issues in Vue components using `vue-facing-decorator`."}],"ecosystem":"npm"}