vue-cli-plugin-eruda
A Vue CLI 3+ plugin of eruda.
Installation
Install under a project created by Vue CLI, It will automatically load this plugin.
npm install --save-dev vue-cli-plugin-eruda
# If Vue CLI is installed globally
vue add eruduGlobal variable
After injection, a global variable will be provided for calling eruda API.
var eruda = require("eruda");
window.eruda === undefined && (window.eruda = eruda);Options
// vue.config.js
module.exports = {
// ... your configs
pluginOptions: {
eruda: {
// options
}
}
}| Options key | Type | Description |
|---|---|---|
| enable | boolean | When NODE_ENV !== 'production' plugin is enabled by default. You can pass true/false to force it to be enabled. |
| exclude | regexp | regexp[] | Used to exclude entries which you don't want to inject eruda. For example you are using "pages" option in vue.config.js |
| plugins | string[] | Passing plugin name to enable eruda plugin. You can use full module(['eruda-fps']) or shorthand(e.g. ['fps'] ) |
| container | element | Container element. If not set, it will append an element directly under html root element |
| tool | string[] | string | Choose which eruda's tools you want, by default all will be added. |
| autoScale=true | boolean | Auto scale eruda for different viewport settings. |
| useShadowDom=true | boolean | Use shadow dom for css encapsulation. |
| defaults | object | Default settings. |
Available defaults settings:
| Name | Type | Desc |
|---|---|---|
| transparency | number | Transparency, 0 to 1 |
| displaySize | number | Display size, 0 to 100 |
| theme | string | Theme, defaults to Light or Dark in dark mode |
container, tool, autoScale, useShadowDom, defaults are eruda's default configuration. You can check document for more information.