{"id":28450,"library":"vue-plugin-render-freeze","title":"vue-plugin-render-freeze","description":"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.","status":"active","version":"2.0.4","language":"javascript","source_language":"en","source_url":"https://github.com/zhennann/vue-plugin-render-freeze","tags":["javascript"],"install":[{"cmd":"npm install vue-plugin-render-freeze","lang":"bash","label":"npm"},{"cmd":"yarn add vue-plugin-render-freeze","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-plugin-render-freeze","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency for Vue 3 reactivity system and component lifecycle","package":"vue","optional":false}],"imports":[{"note":"Package provides a default ES module export. CommonJS require may not work in all environments.","wrong":"const VuePluginRenderFreeze = require('vue-plugin-render-freeze')","symbol":"VuePluginRenderFreeze","correct":"import VuePluginRenderFreeze from 'vue-plugin-render-freeze'"},{"note":"Must be awaited if the callback is async. For synchronous callbacks, omit await but ensure usage inside a component.","wrong":"this.renderFreezeScope(() => { ... })","symbol":"renderFreezeScope","correct":"await this.renderFreezeScope(async () => { ... })"},{"note":"Always use try/finally to guarantee unfreeze on error. Manual mode requires balanced calls.","wrong":"this.renderFreeze(true); ... this.renderFreeze(false);","symbol":"renderFreeze","correct":"this.renderFreeze(true); try { ... } finally { this.renderFreeze(false); }"}],"quickstart":{"code":"import VuePluginRenderFreeze from 'vue-plugin-render-freeze';\nimport { createApp } from 'vue';\nimport App from './App.vue';\n\nconst app = createApp(App);\napp.use(VuePluginRenderFreeze);\napp.mount('#app');\n\n// In a component:\nexport default {\n  methods: {\n    async heavyTask() {\n      await this.renderFreezeScope(async () => {\n        // Simulate long operation\n        for (let i = 0; i < 1000000; i++) {}\n        console.log('Task done');\n      });\n    }\n  }\n};","lang":"javascript","description":"Shows installation, plugin registration, and usage of renderFreezeScope to prevent re-renders during a heavy loop."},"warnings":[{"fix":"Use vue-plugin-render-freeze v1.x for Vue 2 compatibility, or upgrade to Vue 3.","message":"Package is Vue 3 only (v2). Do not use with Vue 2.","severity":"breaking","affected_versions":">=2.0.0 <3.0.0"},{"fix":"Always wrap manual calls in try/finally.","message":"renderFreeze(true) must be paired with renderFreeze(false) in a finally block to avoid stuck frozen state.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use app.use(VuePluginRenderFreeze) instead of Vue.use(VuePluginRenderFreeze).","message":"Vue.use() is deprecated in Vue 3, but still works for plugins. Prefer app.use().","severity":"deprecated","affected_versions":">=2.0.0"},{"fix":"Wrap with try/catch if you need to handle errors.","message":"renderFreezeScope does not catch errors inside the callback; they propagate normally.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-05-09T00:00:00.000Z","next_check":"2026-08-07T00:00:00.000Z","problems":[{"fix":"Ensure the plugin is installed via app.use(VuePluginRenderFreeze) and the method is used within a Vue component's methods or lifecycle hooks.","cause":"renderFreezeScope is called on a non-component context (e.g., outside Vue instance) or plugin not installed.","error":"Uncaught TypeError: Cannot read properties of undefined (reading 'renderFreezeScope')"},{"fix":"Install the plugin with app.use(VuePluginRenderFreeze) and only use in Options API or Composition API inside setup().","cause":"The plugin is not installed or the component is not a Vue 3 component (e.g., functional component or plain object).","error":"Error: 'renderFreeze' is not defined"},{"fix":"Install plugin. In Composition API, use getCurrentInstance() or inject to access renderFreeze/renderFreezeScope.","cause":"Plugin not installed or 'this' context is incorrect (e.g., arrow function in setup).","error":"Uncaught (in promise) TypeError: this.renderFreeze is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}