Vite Plugin for Vue Facing Decorator HMR Fix

1.0.1 · active · verified Sun Apr 19

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.

Common errors

```
Hot Module Replacement (HMR) not working for Vue components using `vue-facing-decorator`.
```
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.

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.
```
IDE (e.g., WebStorm) reports 'Cannot resolve symbol 'MyProp'' or similar auto-completion issues in Vue components using `vue-facing-decorator`.
```
cause Explicitly exporting `toNative(MyComponent)` at the end of the component file interferes with the IDE's static analysis capabilities.

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.

Warnings

gotcha 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.
Fix: Install `vite-plugin-vue-facing-decorator-hmr` and add it to your Vite plugins, then remove manual `toNative()` calls from your component files.
gotcha Using `toNative()` directly in your `vue-facing-decorator` components can cause IDEs like WebStorm to break auto-completion and other language service features.
Fix: This plugin is designed to address this. Use the plugin and omit `toNative()` from your source code.

Install

npm install vite-plugin-vue-facing-decorator-hmr npm
yarn add vite-plugin-vue-facing-decorator-hmr yarn
pnpm add vite-plugin-vue-facing-decorator-hmr pnpm

Imports

vueFacingDecoratorHmr

wrong:

const vueFacingDecoratorHmr = require('vite-plugin-vue-facing-decorator-hmr');

correct:

import vueFacingDecoratorHmr from 'vite-plugin-vue-facing-decorator-hmr';

Vite configuration files (e.g., vite.config.js/ts) are typically ESM and use import statements.

Quickstart

This quickstart demonstrates how to integrate the plugin into your Vite configuration file to enable HMR for `vue-facing-decorator` components.

// vite.config.js or vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vueFacingDecoratorHmr from 'vite-plugin-vue-facing-decorator-hmr';

export default defineConfig({
  plugins: [
    vue(),
    vueFacingDecoratorHmr()
  ]
});

view raw JSON →