One plugin
Drop `viteQRCode()` into `vite.config.*`.
Vite-native QR output for local device testing
Stop sending yourself localhost links
Print LAN URLs and scannable terminal QR codes for local Vite development so phones and tablets on the same network can open your app instantly.
npm install -D vite-qrVite 5+MIT License
vite.config.ts
import { defineConfig } from "vite"
import viteQRCode from "vite-qr"
export default defineConfig({
plugins: [viteQRCode()],
})
terminal output
$ npm run dev
VITE v8.0.0 ready in 480 ms
Visit your Vite app on mobile:
http://192.168.0.14:5173
█▀▀▀▀▀█ ▄▄▄▄ ▄▀█ █▀▀▀▀▀█
▀▀ █ █▀▄█ █▄▄█▄▀▀▄▀▀▄█
Resolved URLs first
Keeps Vite's effective network origin when available.
Real-device QA
Scan and open the dev server instantly on mobile.
Feature Set
A denser layout for what the package actually does
`vite-qr` is small on purpose. The useful part is not a giant API surface, it is reducing the friction between a running Vite server and a real device on your network.
Terminal-first output
Prints LAN URLs and QR codes directly where you already run the Vite dev server.
Serve-only integration
Applies only in dev-server mode, so production builds and previews stay untouched.
Resolved Vite URLs preferred
Uses `server.resolvedUrls.network` first when Vite exposes canonical network targets.
Print once by default
Keeps startup noise low, with optional repeated output on watcher changes when `once: false`.
Network targeting controls
Tune `hostFamily`, include/exclude raw hosts, override path, or prefer one interface.
Filter and logger hooks
Narrow final URLs before printing or pipe messages through your own logger.
CLI setup helpers
`vite-qr init` injects the plugin, and `vite-qr doctor` checks project setup.
Utility exports
Use `printQRCodes`, `getLocalNetworkUrls`, and `getPreferredNetworkUrl` in your own tooling.
Workflow Friction
The pain is not starting Vite. The pain is getting the right URL onto the right device.
01
Find the LAN address that actually works for the current interface and port.
02
Move the URL to a phone every time you want to test on a real device.
03
Repeat the process when HTTPS, host selection, or path details change.
Better Flow
vite-qr compresses that whole handoff into the terminal you already use.
Add one plugin and keep app code untouched.
Print QR codes when the Vite server is listening.
Respect resolved Vite network URLs when they are available.
Tune interface preference and URL filtering only when you need to.
Without vite-qr
$ npm run dev
Local: http://localhost:5173
Network: http://192.168.0.14:5173
// still need to move this to a phone
Local: http://localhost:5173
Network: http://192.168.0.14:5173
// still need to move this to a phone
With vite-qr
$ npm run dev
Visit your Vite app on mobile:
http://192.168.0.14:5173
QR printed in terminal
Visit your Vite app on mobile:
http://192.168.0.14:5173
QR printed in terminal
Config Reference
Reference content in a side panel instead of another cloned landing-page section
vite-qr is intentionally compact: one plugin entry point, two CLI commands, a small set of runtime options, and utilities you can call directly.
Runs only in development via Vite serve mode.
Prefers resolved Vite network URLs when Vite exposes them.
The default network family is `ipv4`.
Link-local addresses are skipped so printed URLs stay useful.
Install
npm install -D vite-qr
vite.config.ts
import { defineConfig } from "vite"
import viteQRCode from "vite-qr"
export default defineConfig({
plugins: [viteQRCode({
preferInterface: "wlan",
path: "/preview",
once: false
})],
})
vite-qr init
Injects `viteQRCode()` into the detected Vite config and installs the package if needed.
vite-qr doctor
Checks for a Vite project, supported Vite version, installed package, config file, and plugin usage.
viteQRCode(options?)
printQRCodes(port, options?)
getLocalNetworkUrls(port, options?)
getPreferredNetworkUrl(port, options?)
enabled
Disable printing without removing the plugin.
once
Defaults to `true`; set `false` to print again on watcher changes while the server keeps running.
path
Override the printed pathname, for example `"/preview"`.
protocol
Defaults to `options.protocol`, then Vite HTTPS config, then `"http"`.
filter
Run custom logic against the final URLs before they are printed.
logger
Provide custom `log` and optional `warn` methods for output control.
hostFamily
Choose `ipv4`, `ipv6`, or `all`.
includeHosts
Whitelist raw interface addresses before URLs are built.
excludeHosts
Blacklist raw interface addresses before URLs are built.
preferInterface
Move one network interface to the top of the discovered URL list.