vue-plugin-render-freeze

2.0.4 verified Sat May 09 auth: no javascript

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.

Common errors

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

cause 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 Error: 'renderFreeze' is not defined ↓

cause 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().

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

cause 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.

Warnings

breaking Package 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.

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

fix Always wrap manual calls in try/finally.

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

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

gotcha renderFreezeScope does not catch errors inside the callback; they propagate normally. ↓

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

Install

npm install vue-plugin-render-freeze

yarn add vue-plugin-render-freeze

pnpm add vue-plugin-render-freeze

Imports

VuePluginRenderFreeze

wrong

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

correct

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

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

renderFreezeScope
wrong
```
this.renderFreezeScope(() => { ... })
```
correct
```
await this.renderFreezeScope(async () => { ... })
```
Must be awaited if the callback is async. For synchronous callbacks, omit await but ensure usage inside a component.

renderFreeze

wrong

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

correct

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

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

Quickstart

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');
      });
    }
  }
};