Skip to main content
Home
Browse packagesDocsSign in

@applelo/vite-plugin-browser-sync@6.0.0
Built and signed on GitHub Actions

latest
Applelo/vite-plugin-browser-sync

Add BrowserSync in your Vite project

This package works with Node.js, Bun
This package works with Node.js
This package works with Bun
JSR Score
100%
Published
2 days ago (6.0.0)

npm JSR Package node-current Coverage Status

vite-plugin-browser-sync

Add BrowserSync to your Vite project.

This plugin supports Vite 6 and 7.

🚀 Features

  • ⚡ Fully integrated in your ViteJS environment
  • 👌 Zero config available for common use cases
  • ✨ All the BrowserSync features
  • 🙌 Support for BrowserSync proxy and snippet mode
  • 🔥 Freedom to manage BrowserSync options
  • 🎛️ Can run on dev, preview or build --watch

📦 Install

npm i -D vite-plugin-browser-sync

# yarn
yarn add -D vite-plugin-browser-sync

# pnpm
pnpm add -D vite-plugin-browser-sync

# bun
bun add -D vite-plugin-browser-sync

👨‍💻 Usage

By default, BrowserSync will start alongside your Vite Server in dev. It uses the proxy mode of BrowserSync based on your Vite server options: no need to pass any options to make it work!

// vite.config.js / vite.config.ts
import VitePluginBrowserSync from 'vite-plugin-browser-sync'

export default {
  plugins: [VitePluginBrowserSync()]
}

If you want to manage BrowserSync or override default behavior of this plugin, you can pass a bs object with your BrowserSync options in it:

// vite.config.js / vite.config.ts
import VitePluginBrowserSync from 'vite-plugin-browser-sync'

export default {
  plugins: [
    VitePluginBrowserSync({
      dev: {
        bs: {
          ui: {
            port: 8080
          },
          notify: false
        }
      }
    })
  ]
}

If you need the snippet mode of BrowserSync, the plugin supports it by injecting the script automatically.

// vite.config.js / vite.config.ts
import VitePluginBrowserSync from 'vite-plugin-browser-sync'

export default {
  plugins: [
    VitePluginBrowserSync({
      dev: {
        mode: 'snippet'
      }
    })
  ]
}

You can also enable the plugin on vite build --watch mode and vite preview mode.

Important

  • In buildWatch, if you use the default proxy mode you need to set the bs object.
  • snippet mode is available in buildWatch but it is not recommended to use since it updates your index.html file.
  • In preview, only the proxy mode is supported since it will not inject the snippet.

// vite.config.js / vite.config.ts
import VitePluginBrowserSync from 'vite-plugin-browser-sync'

export default {
  plugins: [
    VitePluginBrowserSync({
      dev: {
        enable: false,
      },
      preview: {
        enable: true,
      },
      buildWatch: {
        enable: true,
        bs: {
          proxy: 'http://localhost:3000',
        }
      }
    })
  ]
}
Note

For Astro users, this plugin does not work in preview mode because of overrides made by Astro.

vite-plugin-browser-sync options for BrowserSync

This plugin overrides default options from BrowserSync to avoid duplicating behaviors already handled by ViteJS. Furthermore, your ViteJS config is synced with BrowserSync.

If you want to change the overridden options you are free to do so via the bs object.

Option Why dev buildWatch preview
logLevel Set to silent, use ViteJS printUrls to display BrowserSync info ✔️ ✔️ ✔️
open Apply ViteJS open option ✔️ ✔️
codeSync Disabled because it is already handled by ViteJS ✔️
online Synced with the server host option ✔️ ✔️

For proxy mode

Option Why dev buildWatch preview
proxy.target Inject the right url from ViteJS ✔️ ✔️
proxy.ws Force websocket proxy to make ViteJS HMR work ✔️ ✔️

For snippet mode

Option Why
logSnippet Handled by the plugin so no need to display the snippet
snippet The snippet injection is handled by the plugin

👨‍💼 License

MIT

Built and signed on
GitHub Actions
View transparency log

New Ticket: Report package

Please provide a reason for reporting this package. We will review your report and take appropriate action.

Please review the JSR usage policy before submitting a report.

Add Package

pnpm i jsr:@applelo/vite-plugin-browser-sync
or (using pnpm 10.8 or older)
pnpm dlx jsr add @applelo/vite-plugin-browser-sync

Import symbol

import * as vite_plugin_browser_sync from "@applelo/vite-plugin-browser-sync";

Add Package

yarn add jsr:@applelo/vite-plugin-browser-sync
or (using Yarn 4.8 or older)
yarn dlx jsr add @applelo/vite-plugin-browser-sync

Import symbol

import * as vite_plugin_browser_sync from "@applelo/vite-plugin-browser-sync";

Add Package

vlt install jsr:@applelo/vite-plugin-browser-sync

Import symbol

import * as vite_plugin_browser_sync from "@applelo/vite-plugin-browser-sync";

Add Package

npx jsr add @applelo/vite-plugin-browser-sync

Import symbol

import * as vite_plugin_browser_sync from "@applelo/vite-plugin-browser-sync";

Add Package

bunx jsr add @applelo/vite-plugin-browser-sync

Import symbol

import * as vite_plugin_browser_sync from "@applelo/vite-plugin-browser-sync";