{"id":12410,"library":"vue-browserupdate","title":"Vue Browser Update Wrapper","description":"`vue-browserupdate` is a Vue.js wrapper for the popular `browser-update.org` JavaScript library, designed to streamline the integration of browser version checking and update prompting into Vue applications. It provides a straightforward API to initialize the underlying `browser-update` script and exposes its core events—`onshow`, `onclick`, and `onclose`—as Vue-compatible functions. The current stable version, 1.2.0, indicates a mature wrapper for Vue 2 applications. Its release cadence typically follows updates to the core `browser-update` library or significant changes within the Vue.js ecosystem. The package's primary differentiator is its simplicity in encapsulating the browser update notification logic within a standard Vue plugin pattern, minimizing boilerplate for developers.","status":"active","version":"1.2.0","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","vue","vuejs","wrapper","outdated","browser","compatibility","update","internet"],"install":[{"cmd":"npm install vue-browserupdate","lang":"bash","label":"npm"},{"cmd":"yarn add vue-browserupdate","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-browserupdate","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Provides the core browser detection and update prompting functionality.","package":"browser-update","optional":false},{"reason":"Required runtime peer dependency as this is a Vue.js plugin.","package":"vue","optional":false}],"imports":[{"note":"The primary import for installing the plugin in a Vue 2 application using `Vue.use()`.","wrong":"const VueBrowserUpdate = require('vue-browserupdate');","symbol":"VueBrowserUpdate","correct":"import VueBrowserUpdate from 'vue-browserupdate';"},{"note":"These event handlers (onshow, onclick, onclose) are attached directly to the global `Vue.browserUpdate` object after the plugin is installed, not as named exports.","wrong":"import { onshow } from 'vue-browserupdate';","symbol":"Vue.browserUpdate.onshow","correct":"Vue.browserUpdate.onshow(() => { /* ... */ });"}],"quickstart":{"code":"import Vue from 'vue';\nimport VueBrowserUpdate from 'vue-browserupdate';\n\n// Install the plugin with custom options\nVue.use(VueBrowserUpdate, {\n  options: {\n    container: document.body,\n    required: { e: -2, f: -2, o: -2, s: -2, c: -2 }, // Example: Require latest 2 versions\n    text: 'Your browser is outdated. Please update to improve your experience and security.',\n    // Full options: http://browser-update.org/customize.html\n  },\n  test: true, // Enable test mode to always show the prompt\n});\n\n// Attach event listeners (optional)\nVue.browserUpdate.onshow(() => {\n  console.log('The browser update modal is visible.');\n});\n\nVue.browserUpdate.onclick(() => {\n  console.log('The update link was clicked.');\n});\n\nVue.browserUpdate.onclose(() => {\n  console.log('The update modal was closed.');\n});\n\n// Basic Vue app setup\nnew Vue({\n  el: '#app',\n  template: '<div><h1>My App</h1><p>Browser update prompt will show if conditions met.</p></div>'\n});","lang":"javascript","description":"Demonstrates how to install `vue-browserupdate` as a Vue plugin, pass custom options to the underlying `browser-update` library, enable test mode, and attach event listeners to the browser update prompt."},"warnings":[{"fix":"Remove `test: true` or set it to `false` in production build configurations.","message":"The `test: true` option forces the browser update prompt to appear regardless of the browser version, which is useful for development and testing but should be removed or set to `false` for production deployments.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Ensure all `browser-update.org` specific configurations are nested under the `options` property when calling `Vue.use()`.","message":"All configuration for the underlying `browser-update` library must be passed within the `options` key of the plugin's configuration object, e.g., `Vue.use(VueBrowserUpdate, { options: { /* ... */ } })`.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"For Vue 3, consider using a different `browser-update` integration or creating a custom plugin that adapts this wrapper's logic to Vue 3's `app.use()` and `app.config.globalProperties`.","message":"This wrapper is primarily designed for Vue 2 applications using the global Vue instance. Its direct usage patterns (`Vue.use`, `Vue.browserUpdate`) are not directly compatible with Vue 3's `createApp` instance-based plugin registration without additional shims or refactoring.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `import Vue from 'vue';` is present and that `Vue.use(VueBrowserUpdate)` is called after Vue itself is properly loaded and initialized.","cause":"Attempting to call `.use()` on an undefined or incorrect Vue object, or Vue is not globally available/imported correctly.","error":"TypeError: Vue.use is not a function"},{"fix":"Verify that `Vue.use(VueBrowserUpdate)` is called before any attempts to access `Vue.browserUpdate.onshow`, `onclick`, or `onclose`.","cause":"The `Vue.browserUpdate` object, which contains the event handler methods, is accessed before the `vue-browserupdate` plugin has been installed via `Vue.use()`.","error":"TypeError: Cannot read properties of undefined (reading 'onshow')"}],"ecosystem":"npm"}