Registry / web-framework / vue-plugin-render-freeze

vue-plugin-render-freeze

library2.0.4jsnpmunverified

Prevents unnecessary component re-renders during long-running synchronous operations in Vue 3. Version 2.0.4, stable, light maintenance. Provides two usage patterns: a scoped async function and manual start/stop via a render-freeze flag. Unlike v-memo or manual computed caching, it globally freezes the component tree until the operation completes, useful for bulk data processing or animations.

web-framework

npm install vue-plugin-render-freeze

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-PLUGIN-RENDER-

vue-plugin-render-freeze

web-frameworkjavascriptv2.0.4

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

VuePluginRenderFreeze

✓ import VuePluginRenderFreeze from 'vue-plugin-render-freeze'

✗ const VuePluginRenderFreeze = require('vue-plugin-render-freeze')

Package provides a default ES module export. CommonJS require may not work in all environments.

renderFreezeScope

✓ await this.renderFreezeScope(async () => { ... })

✗ this.renderFreezeScope(() => { ... })

Must be awaited if the callback is async. For synchronous callbacks, omit await but ensure usage inside a component.

renderFreeze

✓ this.renderFreeze(true); try { ... } finally { this.renderFreeze(false); }

✗ this.renderFreeze(true); ... this.renderFreeze(false);

Always use try/finally to guarantee unfreeze on error. Manual mode requires balanced calls.

Shows installation, plugin registration, and usage of renderFreezeScope to prevent re-renders during a heavy loop.

import VuePluginRenderFreeze from 'vue-plugin-render-freeze'; import { createApp } from 'vue'; import App from './App.vue'; const app = createApp(App); app.use(VuePluginRenderFreeze); app.mount('#app'); // In a component: export default { methods: { async heavyTask() { await this.renderFreezeScope(async () => { // Simulate long operation for (let i = 0; i < 1000000; i++) {} console.log('Task done'); }); } } };

Debug

Known issues

breakingPackage is Vue 3 only (v2). Do not use with Vue 2.

fix

Use vue-plugin-render-freeze v1.x for Vue 2 compatibility, or upgrade to Vue 3.

affects: >=2.0.0 <3.0.0

gotcharenderFreeze(true) must be paired with renderFreeze(false) in a finally block to avoid stuck frozen state.

fix

Always wrap manual calls in try/finally.

affects: >=1.0.0

deprecatedVue.use() is deprecated in Vue 3, but still works for plugins. Prefer app.use().

fix

Use app.use(VuePluginRenderFreeze) instead of Vue.use(VuePluginRenderFreeze).

affects: >=2.0.0

gotcharenderFreezeScope does not catch errors inside the callback; they propagate normally.

fix

Wrap with try/catch if you need to handle errors.

affects: >=1.0.0

Errors

Common errors & fixes

Uncaught TypeError: Cannot read properties of undefined (reading 'renderFreezeScope')

renderFreezeScope is called on a non-component context (e.g., outside Vue instance) or plugin not installed.

fix

Ensure the plugin is installed via app.use(VuePluginRenderFreeze) and the method is used within a Vue component's methods or lifecycle hooks.

Error: 'renderFreeze' is not defined

The plugin is not installed or the component is not a Vue 3 component (e.g., functional component or plain object).

fix

Install the plugin with app.use(VuePluginRenderFreeze) and only use in Options API or Composition API inside setup().

Uncaught (in promise) TypeError: this.renderFreeze is not a function

Plugin not installed or 'this' context is incorrect (e.g., arrow function in setup).

fix

Install plugin. In Composition API, use getCurrentInstance() or inject to access renderFreeze/renderFreezeScope.

Upgrade

Version history

2.0.4latest on npm

Audit

Dependencies

vuerequiredpeer dependency for Vue 3 reactivity system and component lifecycle

Agent activity

9 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/zhennann/vue-plugin-render-freeze ↗

packagehttps://www.npmjs.com/package/vue-plugin-render-freeze ↗