vite-plugin-url-copy
v1.1.4TypeScript
Auto copy the Vite server URL and generate a QR code for easy access during dev or preview
0/weekUpdated 1 years agoMITUnpacked: 14.6 KB
Published by XioDone
npm install 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
``bash`
pnpm i vite-plugin-url-copy -D
Usage
- Configure ESM as default in package.json, it's up to you
`json`
{
"type": "module"
}
- Add plugin to your vite.config.ts
`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
`ts`
ServerUrlCopy({
// QR code using network URL
qrcode: {
disabled: false,
},
})
- Run
`bash
pnpm dev
#or
pnpm preview
`
Configuration
- Example
- Refer to the type definitions for more options
`ts`
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
`jsonc`
// package.json
{
"scripts": {
"dev": "vite --host"
}
}
`ts``
// 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!