Generate QR Code for quickly opening app in mobile browser

[tony19]

In addition to logging the network URL in the console, it would be handy to also log the QR Code to enable quickly opening the Vite app in mobile browsers (e.g., using qrcode).

Example:

[tony19]

Oh, I see now that there's @bluwy's vite-plugin-qrcode, but the QR code looks jagged. Also, it currently requires Vite 2 (cannot be installed in a Vite 3 project).

[bluwy]

It's jagged in the markdown example, but looks good in the terminal 😄 I'm waiting for #8986 to be stabilised before supporting Vite 3.

[bluwy]

I've release vite-plugin-qrcode 0.2.0 with support for Vite 3 as there's no use waiting any longer 😬 Will cut 1.0.0 when the API stabilizes.

[tony19]

I guess this is best done as a Vite plugin than being baked in.

Here's a simple Vite 3 plugin (for vite@3.0.2):

// vite.config.ts
import { defineConfig, type Plugin, type ViteDevServer } from 'vite'
import vue from '@vitejs/plugin-vue'
import qrcode from 'qrcode'

const qrcodeServerUrl = (): Plugin => {
  let origPrintUrls = () => { }

  const logUrlAsQrCode = (url: string) => {
    qrcode.toString(url, { type: 'terminal', small: true }, (err, urlQrCode) => {
      if (err) {
        console.warn('cannot generate qrcode', err)
      } else {
        console.log() // empty line for margin
        console.log(urlQrCode)
      }
    })
  }

  return {
    apply: 'serve',
    name: 'qrcode-server-url',
    configureServer(server: ViteDevServer) {
      origPrintUrls = server.printUrls

      server.printUrls = () => {
        origPrintUrls()
        server.resolvedUrls.network?.forEach(url => logUrlAsQrCode(url))
      }
    }
  }
}

export default defineConfig({
  plugins: [vue(), qrcodeServerUrl()]
})