{"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,"search_vec":"'1.0.1':82 '2024':89 'address':12 'allow':101 'auto':70 'auto-complet':69 'break':65 'build':99 'call':46 'challeng':128 'code':109 'complet':71 'compon':37,50 'correct':55 'current':79 'decor':6,20,42,49 'degrad':61 'develop':62,102,126 'environ':73 'experi':63 'face':5,19,41 'featur':67 'fix':8 'function':54,113 'hmr':7,27,52,116 'hot':24 'ide':66,112 'incompat':15 'initi':86 'inject':91 'javascript':129 'js':135 'known':14 'librari':43 'like':68 'logic':95 'maintain':115 'method':32 'modul':25 'necessari':93 'offer':119 'omit':34,104 'plugin':2,11,78,132 'practic':58 'preserv':111 'process':100 'releas':87 'replac':26 'requir':45 'sever':60 'sfc':134 'solut':122 'sourc':108 'specif':125 'support':117 'system':28 'target':121 'therebi':110 'tonat':31,47,94 'transpar':90 'typescript':136 'typic':44 'version':81 'vite':1,10,22,98,131 'vite-plugin':130 'vue':4,18,36,40,133 'vue-facing-decor':17,39 'webstorm':76 'workflow':127","created_at":"2026-04-19T13:42:51.030056+00:00","updated_at":"2026-04-19T13:42:51.030056+00:00","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","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/Arakmar/vite-plugin-vue-facing-decorator-hmr","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/vite-plugin-vue-facing-decorator-hmr","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-18","install_tag":null}}