{"id":12409,"library":"vue-browser-detect-plugin","title":"Vue Browser Detect Plugin","description":"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.","status":"active","version":"0.1.18","language":"javascript","source_language":"en","source_url":"https://github.com/ICJIA/vue-browser-detect-plugin#readme","tags":["javascript","Vue","browser detection"],"install":[{"cmd":"npm install vue-browser-detect-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add vue-browser-detect-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-browser-detect-plugin","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required as a peer dependency for the plugin to function within a Vue application.","package":"vue","optional":false}],"imports":[{"note":"This package exports a default plugin object, not named exports for the main plugin.","wrong":"import { browserDetect } from 'vue-browser-detect-plugin';","symbol":"browserDetect","correct":"import browserDetect from 'vue-browser-detect-plugin';"},{"note":"The plugin extends the Vue instance and must be installed via `Vue.use()` before the app is mounted.","wrong":"Vue.component('browser-detect', browserDetect);","symbol":"Vue.use","correct":"import Vue from 'vue';\nimport browserDetect from 'vue-browser-detect-plugin';\nVue.use(browserDetect);"},{"note":"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.","wrong":"export default {\n plugins: [\n { src: '~/plugins/browser-detect.js', mode: 'client' }\n ]\n}","symbol":"Nuxt.js Module","correct":"export default {\n buildModules: [\n 'vue-browser-detect-plugin/nuxt'\n ]\n}"}],"quickstart":{"code":"npm install vue-browser-detect-plugin\n\n// main.js or main.ts\nimport Vue from 'vue';\nimport App from './App.vue';\nimport browserDetect from 'vue-browser-detect-plugin';\n\nVue.use(browserDetect);\n\nnew Vue({\n render: h => h(App),\n}).$mount('#app');\n\n// In a Vue component (e.g., App.vue)\n\n\n\n\n","lang":"javascript","description":"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."},"warnings":[{"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`.","message":"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`.","severity":"gotcha","affected_versions":"<2.9 of Nuxt.js"},{"fix":"When targeting Chrome on iOS, explicitly use `this.$browserDetect.isChromeIOS` instead of `this.$browserDetect.isChrome`.","message":"The `isChrome` flag specifically detects Chrome desktop browsers. For Chrome on iOS, use `isChromeIOS`.","severity":"gotcha","affected_versions":">=0.1.8"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `Vue.use(browserDetect);` is called in your `main.js` (or equivalent entry file) before initializing your Vue application.","cause":"The `vue-browser-detect-plugin` was not properly installed with `Vue.use()` before accessing `$browserDetect` on the Vue instance.","error":"TypeError: Cannot read properties of undefined (reading 'isIE') or Cannot read property 'isIE' of undefined"},{"fix":"Add `import Vue from 'vue';` at the top of your main application file.","cause":"The Vue library itself was not imported before attempting to call `Vue.use()` or create a new Vue instance.","error":"ReferenceError: Vue is not defined"},{"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.","cause":"The Nuxt.js module path is incorrect, or the package is not installed correctly as a dependency for Nuxt to resolve it.","error":"Cannot find module 'vue-browser-detect-plugin/nuxt' or Module not found: Error: Can't resolve 'vue-browser-detect-plugin/nuxt'"}],"ecosystem":"npm"}