Vue Browser Detect Plugin

0.1.18 · active · verified Sun Apr 19

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.

Common errors

```
TypeError: Cannot read properties of undefined (reading 'isIE') or Cannot read property 'isIE' of undefined
```
cause 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
```
cause 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'
```
cause 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.

Warnings

gotcha When 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`.
gotcha The `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`.
gotcha This 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.

Install

npm install vue-browser-detect-plugin npm
yarn add vue-browser-detect-plugin yarn
pnpm add vue-browser-detect-plugin pnpm

Imports

browserDetect

wrong:

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

correct:

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

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

Vue.use

wrong:

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

correct:

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

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

Nuxt.js Module
wrong:
```
export default {
  plugins: [
    { src: '~/plugins/browser-detect.js', mode: 'client' }
  ]
}
```
correct:
```
export default {
  buildModules: [
    'vue-browser-detect-plugin/nuxt'
  ]
}
```
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.

Quickstart

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>

view raw JSON →