vite-plugin-url-copy

vite-plugin-url-copy

⚡️ Auto copy the Vite server URL and generate a QR code for easy access during dev or preview.

Features

• 🌟 Ready to use, supports dev and preview mode.
• 💭 Supports copy server URL (local and network types).
• 📱 Supports generate network URL QR code.
• 💡 Customizable characters for copy or generate QR code.
• 😃 Friendly Hot Reload, When the vite server performs a hot restart, the plugin will be reloaded again only after the plugin's configuration or port has changed.

[!IMPORTANT] Recommended minimum vite version is v4.

Vite CJS Node API deprecated: the CJS build of Vite's Node API is deprecated. See https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.

Recommend configuring ESM as the default, CJS build will be deprecated in v2.

Install

pnpm i vite-plugin-url-copy -D

Usage

• Configure ESM as default in package.json, it's up to you

{
  "type": "module"
}

• Add plugin to your vite.config.ts

import ServerUrlCopy from 'vite-plugin-url-copy'

export default defineConfig({
  plugins: [ServerUrlCopy()],
  server: {
    host: true,
  },
  preview: {
    host: true,
  }
})

!!! QR code is disabled by default and needs to be explicitly enabled

ServerUrlCopy({
  // QR code using network URL
  qrcode: {
    disabled: false,
  },
})

• Run

pnpm dev

#or

pnpm preview

Configuration

• Example
• Refer to the type definitions for more options

ServerUrlCopy({
  copy: {
    // 'local' | 'network'
    mode: 'local',
    // Custom string to copy when the server start, It will overwrite the server URL
    // custom?: string | ((URL: string) => string)
    custom: '',
    // Disable Copy
    disabled: false,
    // Custom display color
    color: 'green',
  },
  qrcode: {
    // Custom string for the generate QR code, It will overwrite the server URL
    // custom?: string | ((URL: string) => string)
    custom: '',
    // Disable QRCode
    disabled: true,
    // Custom display color
    color: 'green',
  },
  // Disable plugin
  disabled: false,
  // Log config info
  debug: false,
})

Network may need to enable host

// package.json
{
  "scripts": {
    "dev": "vite --host"
  }
}

// or vite.config.ts
export default defineConfig({
  plugins: [ServerUrlCopy()],
  server: {
    host: true,
  },
})

Ending

Hey there! If you enjoy my project, please give me a ⭐️. Thanks!

License

MIT License © 2023-PRESENT XioDone