Vue Browser Update Wrapper

1.2.0 · active · verified Sun Apr 19

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

Common errors

```
TypeError: Vue.use is not a function
```
cause Attempting to call `.use()` on an undefined or incorrect Vue object, or Vue is not globally available/imported correctly.

fix Ensure `import Vue from 'vue';` is present and that `Vue.use(VueBrowserUpdate)` is called after Vue itself is properly loaded and initialized.
```
TypeError: Cannot read properties of undefined (reading 'onshow')
```
cause The `Vue.browserUpdate` object, which contains the event handler methods, is accessed before the `vue-browserupdate` plugin has been installed via `Vue.use()`.

fix Verify that `Vue.use(VueBrowserUpdate)` is called before any attempts to access `Vue.browserUpdate.onshow`, `onclick`, or `onclose`.

Warnings

gotcha 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.
Fix: Remove `test: true` or set it to `false` in production build configurations.
gotcha 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: { /* ... */ } })`.
Fix: Ensure all `browser-update.org` specific configurations are nested under the `options` property when calling `Vue.use()`.
gotcha 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.
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`.

Install

npm install vue-browserupdate npm
yarn add vue-browserupdate yarn
pnpm add vue-browserupdate pnpm

Imports

VueBrowserUpdate
wrong:
```
const VueBrowserUpdate = require('vue-browserupdate');
```
correct:
```
import VueBrowserUpdate from 'vue-browserupdate';
```
The primary import for installing the plugin in a Vue 2 application using `Vue.use()`.
Vue.browserUpdate.onshow
wrong:
```
import { onshow } from 'vue-browserupdate';
```
correct:
```
Vue.browserUpdate.onshow(() => { /* ... */ });
```
These event handlers (onshow, onclick, onclose) are attached directly to the global `Vue.browserUpdate` object after the plugin is installed, not as named exports.

Quickstart

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.

import Vue from 'vue';
import VueBrowserUpdate from 'vue-browserupdate';

// Install the plugin with custom options
Vue.use(VueBrowserUpdate, {
  options: {
    container: document.body,
    required: { e: -2, f: -2, o: -2, s: -2, c: -2 }, // Example: Require latest 2 versions
    text: 'Your browser is outdated. Please update to improve your experience and security.',
    // Full options: http://browser-update.org/customize.html
  },
  test: true, // Enable test mode to always show the prompt
});

// Attach event listeners (optional)
Vue.browserUpdate.onshow(() => {
  console.log('The browser update modal is visible.');
});

Vue.browserUpdate.onclick(() => {
  console.log('The update link was clicked.');
});

Vue.browserUpdate.onclose(() => {
  console.log('The update modal was closed.');
});

// Basic Vue app setup
new Vue({
  el: '#app',
  template: '<div><h1>My App</h1><p>Browser update prompt will show if conditions met.</p></div>'
});

view raw JSON →