Registry / web-framework / vue-browser-detect-plugin

vue-browser-detect-plugin

library0.1.18jsnpmunverified

Vue Browser Detect Plugin is a lightweight and straightforward utility for Vue.js applications, enabling developers to identify the user's browser, its version, and the full user-agent string. It exposes browser detection flags (e.g., `isIE`, `isChrome`, `isFirefox`, `isSafari`, `isEdge`, `isOpera`, `isChromeIOS`, `isIOS`) and detailed meta-information (`name`, `version`, `ua`) directly via `vm.$browserDetect`. The current stable version is 0.1.18, and releases appear to be on an as-needed basis rather than a fixed cadence, focusing on adding new browser checks or minor enhancements. Its key differentiator is its simplicity and direct integration into Vue's instance, offering a non-intrusive way to adapt UI/UX based on browser capabilities without heavy external dependencies.

web-framework

npm install vue-browser-detect-plugin

package ↗

INSTALL

IMPORT

SIG · VUE-BROWSER-DETECT

vue-browser-detect-plugin

web-frameworkjavascriptv0.1.18

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

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

browserDetect

✓ import browserDetect from 'vue-browser-detect-plugin';

✗ import { browserDetect } from 'vue-browser-detect-plugin';

This package exports a default plugin object, not named exports for the main plugin.

Vue.use

✓ import Vue from 'vue'; import browserDetect from 'vue-browser-detect-plugin'; Vue.use(browserDetect);

✗ Vue.component('browser-detect', browserDetect);

The plugin extends the Vue instance and must be installed via `Vue.use()` before the app is mounted.

Nuxt.js Module

✓ export default { buildModules: [ 'vue-browser-detect-plugin/nuxt' ] }

✗ export default { plugins: [ { src: '~/plugins/browser-detect.js', mode: 'client' } ] }

For Nuxt.js, use the dedicated `vue-browser-detect-plugin/nuxt` module in `buildModules` (or `modules` for Nuxt < v2.9) for server-side rendering compatibility.

This quickstart demonstrates how to install `vue-browser-detect-plugin`, integrate it into a Vue application using `Vue.use()`, and access the `$browserDetect` object from within a Vue component to display various browser-specific properties and metadata.

npm install vue-browser-detect-plugin // main.js or main.ts import Vue from 'vue'; import App from './App.vue'; import browserDetect from 'vue-browser-detect-plugin'; Vue.use(browserDetect); new Vue({ render: h => h(App), }).$mount('#app'); // In a Vue component (e.g., App.vue) <template> <div> <h1>Browser Detection Demo</h1> <p>Is Chrome: {{ $browserDetect.isChrome }}</p> <p>Is Firefox: {{ $browserDetect.isFirefox }}</p> <p>Is iOS: {{ $browserDetect.isIOS }}</p> <p>Browser Name: {{ $browserDetect.meta.name }}</p> <p>Browser Version: {{ $browserDetect.meta.version }}</p> <p>User Agent: {{ $browserDetect.meta.ua }}</p> <div v-if="$browserDetect.isIE" class="ie-warning"> You are using Internet Explorer, which may have limited support. </div> </div> </template> <script> export default { name: 'App', mounted() { console.log('Browser details:', this.$browserDetect); } }; </script> <style> .ie-warning { color: red; font-weight: bold; } </style>

Debug

Known issues

gotchaWhen using Nuxt.js, ensure you use the correct configuration section based on your Nuxt version. For Nuxt < v2.9, the module must be listed in the `modules` array and installed as a regular `dependency` (not devDependency). For Nuxt >= v2.9, it should be in `buildModules`.

fix

For Nuxt < v2.9: `npm install vue-browser-detect-plugin` and add to `modules` in `nuxt.config.js`. For Nuxt >= v2.9: `npm install --save-dev vue-browser-detect-plugin` and add to `buildModules` in `nuxt.config.js`.

affects: <2.9 of Nuxt.js

gotchaThe `isChrome` flag specifically detects Chrome desktop browsers. For Chrome on iOS, use `isChromeIOS`.

fix

When targeting Chrome on iOS, explicitly use `this.$browserDetect.isChromeIOS` instead of `this.$browserDetect.isChrome`.

affects: >=0.1.8

gotchaThis plugin relies on the browser's User-Agent string for detection. User-Agent strings can be spoofed or may not always be perfectly accurate, and modern browsers increasingly freeze or simplify them, potentially leading to inaccurate detection results over time.

fix

Consider browser detection as a heuristic rather than an absolute truth. For critical functionality, prefer feature detection (e.g., `if ('fetch' in window)`) over user-agent sniffing.

affects: >=0.1.0

Errors

Common errors & fixes

TypeError: Cannot read properties of undefined (reading 'isIE') or Cannot read property 'isIE' of undefined

The `vue-browser-detect-plugin` was not properly installed with `Vue.use()` before accessing `$browserDetect` on the Vue instance.

fix

Ensure `Vue.use(browserDetect);` is called in your `main.js` (or equivalent entry file) before initializing your Vue application.

ReferenceError: Vue is not defined

The Vue library itself was not imported before attempting to call `Vue.use()` or create a new Vue instance.

fix

Add `import Vue from 'vue';` at the top of your main application file.

Cannot find module 'vue-browser-detect-plugin/nuxt' or Module not found: Error: Can't resolve 'vue-browser-detect-plugin/nuxt'

The Nuxt.js module path is incorrect, or the package is not installed correctly as a dependency for Nuxt to resolve it.

fix

Ensure `vue-browser-detect-plugin` is installed and the module path `'vue-browser-detect-plugin/nuxt'` is correctly specified in your `nuxt.config.js` `buildModules` or `modules` array.

Upgrade

Version history

0.1.18latest on npm

Audit

Dependencies

vuerequiredRequired as a peer dependency for the plugin to function within a Vue application.

Agent activity

12 hits · last 30 days

node

OpenAI (training)

Resources

packagehttps://www.npmjs.com/package/vue-browser-detect-plugin ↗