Vue In-App Browser Warning

A powerful Vue 3 component that detects when users are accessing your web app from in-app browsers (Facebook, Instagram, Messenger, LinkedIn, etc.) and prompts them to open the link in their native browser for a better experience.

Features

✨ Smart Detection - Identifies 10+ in-app browser types (Facebook, Instagram, Messenger, LinkedIn, Line, Twitter, Google Search App, etc.)

📱 Platform Support - Works on both iOS and Android devices

🎨 Beautiful UI - Pre-styled component with handcrafted CSS (prefixed with viabw- to avoid conflicts)

⚡ Lightweight - Minimal dependencies, just Vue 3

🔌 Easy Integration - Drop it into any Vue 3 or Nuxt project

🌐 International - Text in Bengali and English

Installation

npm install vue-in-app-browser-warning

or with yarn:

yarn add vue-in-app-browser-warning

Usage

Basic Usage

<script setup>
import InAppBrowserWarning from 'vue-in-app-browser-warning'
</script>

<template>
  <div>
    <!-- Your app content -->
    <InAppBrowserWarning />
  </div>
</template>

In App.vue (Global)

Add the component once inside your root layout (usually App.vue) so it can watch every route:

<!-- src/App.vue -->
<script setup>
import { RouterView } from 'vue-router'
import InAppBrowserWarning from 'vue-in-app-browser-warning'
</script>

<template>
  <div class="app-shell">
    <header>...</header>
    <main>
      <RouterView />
    </main>
    <footer>...</footer>

    <!-- Render at the very end so the modal can cover the full page -->
    <InAppBrowserWarning />
  </div>
</template>

How It Works

1. Detection: On component mount, it checks the user agent string against a list of known in-app browser patterns
2. Display: If an in-app browser is detected, a modal overlay is displayed with instructions
3. Action: Users can click the "Open in Chrome" button or follow manual instructions
4. Android Intent: On Android, it attempts to open the current page with Chrome using Android Intents
5. iOS Fallback: On iOS, it opens in the native browser since direct Chrome redirection isn't possible

Detected Browsers

The component detects the following in-app browsers:

• ✗ Facebook App (FBAV, FBAN, FB_IAB)
• ✗ Facebook on iOS (FBIOS)
• ✗ Instagram
• ✗ LinkedIn App (LinkedInApp)
• ✗ Line
• ✗ Twitter
• ✗ Google Search App (GSA)
• ✗ Safari on iOS (when not the main browser)

Styling & CSS

All CSS classes are prefixed with viabw- to prevent conflicts with your project's styles. The component ships with its own scoped CSS, so you don't need Tailwind or any extra stylesheet. Feel free to override the styles using :deep(.viabw-* ) selectors if you need a different look.

Browser Support

• iOS 11+
• Android 5+
• Modern browsers with ES6 support

Configuration

Currently, the component uses hardcoded Bengali text. If you need to customize the messages:

1. Create a fork of this repository
2. Modify the text in src/InAppBrowserWarning.vue
3. Build and publish under your own npm organization

Advanced Usage

Manual Browser Detection

You can import and use the detection logic separately:

<script setup>
import { ref } from 'vue'
import InAppBrowserWarning from 'vue-in-app-browser-warning'

const showWarning = ref(false)
</script>

<template>
  <div>
    <InAppBrowserWarning v-if="someCondition" />
  </div>
</template>

License

MIT © 2025 msilabs

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Support

For issues, feature requests, or questions, please create an issue on GitHub.

Changelog

v1.0.0

• Initial release
• Support for 10+ in-app browser types
• Android Intent support
• Beautiful Tailwind CSS design
• Zero dependencies (Vue 3 only)