Debug Vue code with Ray to fix problems faster
npm install vue-ray

vue-ray
Install this package in any Vue 3 project to send messages to the Ray app.
Install with npm:
``bash`
npm install vue-ray
or bun:
`bash`
bun add vue-ray
When using in a Vue 3 project, you may optionally install the plugin globally in your main.js or app.js file. This is primarily useful if you want to cusomize the connection settings for the package.
`js
import { RayPlugin } from 'vue-ray';
import { createApp } from 'vue';
import App from './App.vue';
const app = createApp(App);
app.use(RayPlugin, {
port: 23500,
host: 'localhost',
interceptErrors: true,
nodeRaySettings: {
interceptConsoleLog: true,
},
});
`
| Name | Type | Default | Description |
| --------------------- | ---------- | ----------- | -------------------------------------------------------------- |
| host | string | localhost | host to connect to the Ray app on |scheme
| | string | http | URI scheme to use to connect to host |interceptErrors
| | boolean | false | send Vue errors to Ray |port
| | number | 23517 | port to connect to the Ray app on |nodeRaySettings
| | object | {} | pass additional settings for node-ray _(reference)_ |
To access the ray() function, import raySetup() from the vue-ray library:
`html`
The raySetup() function accepts an optional options object, defined as:
`typescript`
interface RaySetupOptions {
connection?: {
host?: string;
port?: number;
}
lifecycleEvents?: {
beforeCreate?: boolean;
beforeMount?: boolean;
created?: boolean;
mounted?: boolean;
unmounted?: boolean;
updated?: boolean;
all?: boolean;
}
}
The lifecycleEvents object can be used to enable or disable sending of the component's lifecycle events to Ray. Use the all property to enable all lifecycle events.
The following example will send the created and mounted events to Ray for the component:
`html`
The connection object can be used to specify the host and port to connect to the Ray app. The default values are localhost and 23517, respectively.
Once you have called raySetup(), you may use the ray function in the Vue SFC as normal _(see node-ray)_ to send data to Ray:
`html`
See the node-ray reference for a complete list of available methods.
| Name | Description |
| --------------------------- | ------------------------------------------------------ |
| ray().data() | show the component data |ray().props()
| | show the component props |ray().element(refName: string)
| | render the HTML of an element with a ref of refName |ray().track(name: string)
| | display changes to a component's data variable _(best used when not using script setup)_ |ray().untrack(name: string)
| | stop displaying changes to a component's data variable |ray().watch(name: string, ref: Ref)
| | watch a ref's value and send changes to Ray _(best used in script setup)_ |ray().unwatch(name: string)
| | stop watching a ref's value and stop sending changes to Ray |
When using the script setup syntax, you can use the ray().watch(name, ref) method to watch a ref's value and send changes to Ray. Here's an example SFC using the script setup syntax:
`html
{{ one }}
{{ two }}
`
When not using the script setup syntax, you can use the ray().track(name) method to track changes to a component's data variable. Here's an example SFC:
`html
> When either tracking data or watching a ref, you will notice that the entry in Ray updates in real-time Use the This will build the package in development mode, and writes to the This will build the package in production mode, and writes to the ...or run with coverage: --- Please see CHANGELOG for more information on what has changed recently. Please see CONTRIBUTING for details. Please review our security policy on how to report security vulnerabilities. - Patrick Organ The MIT License (MIT). Please see License File for more information.
`interceptErrors
> as the data changes, instead of creating a new entry each time the >data changes. Intercepting errors
option to intercept errors and send them to Ray:`js`
app.use(RayPlugin, { interceptErrors: true });`Development setup
bash`
npm install
npm run test`Development Builds
bash`
npm run build:devdist-temp directory.`Production Builds
bash`
npm run build:distdist directory.vue-rayCode Coverage Details
Testing
uses Vitest for unit tests. To run the test suite, run the following command:`bash`
npm run test`bash``
npm run test:coverageChangelog
Contributing
Security Vulnerabilities
Credits
- All ContributorsLicense