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

1pnpm i vite-plugin-url-copy -D

Usage

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

1{
2  "type": "module"
3}

• Add plugin to your vite.config.ts

1import ServerUrlCopy from 'vite-plugin-url-copy'
2
3export default defineConfig({
4  plugins: [ServerUrlCopy()],
5  server: {
6    host: true,
7  },
8  preview: {
9    host: true,
10  }
11})

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

1ServerUrlCopy({
2  // QR code using network URL
3  qrcode: {
4    disabled: false,
5  },
6})

• Run

1pnpm dev
2
3#or
4
5pnpm preview

Configuration

• Example
• Refer to the type definitions for more options

1ServerUrlCopy({
2  copy: {
3    // 'local' | 'network'
4    mode: 'local',
5    // Custom string to copy when the server start, It will overwrite the server URL
6    // custom?: string | ((URL: string) => string)
7    custom: '',
8    // Disable Copy
9    disabled: false,
10    // Custom display color
11    color: 'green',
12  },
13  qrcode: {
14    // Custom string for the generate QR code, It will overwrite the server URL
15    // custom?: string | ((URL: string) => string)
16    custom: '',
17    // Disable QRCode
18    disabled: true,
19    // Custom display color
20    color: 'green',
21  },
22  // Disable plugin
23  disabled: false,
24  // Log config info
25  debug: false,
26})

Network may need to enable host

1// package.json
2{
3  "scripts": {
4    "dev": "vite --host"
5  }
6}

1// or vite.config.ts
2export default defineConfig({
3  plugins: [ServerUrlCopy()],
4  server: {
5    host: true,
6  },
7})

Ending

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

License

MIT License © 2023-PRESENT XioDone