vue-ray

vue-ray

Debug Vue code with Ray to fix problems faster

Install this package in any Vue 3 project to send messages to the Ray app.

Installation

Install with npm:

``bash
npm install vue-ray
`

or bun:

`bash
bun add vue-ray
`

$3

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,
},
});
`

$3

| 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)_ |

Usage

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.

$3

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.

Vue-specific 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 |

Watching refs

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



`

Tracking component data

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
> as the data changes, instead of creating a new entry each time the >data changes.

Intercepting errors

Use the interceptErrors 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:dev
`

This will build the package in development mode, and writes to the dist-temp directory.

Production Builds

`bash
npm run build:dist
`

This will build the package in production mode, and writes to the dist directory.

Code Coverage Details

Testing

vue-ray uses Vitest for unit tests. To run the test suite, run the following command:

`bash
npm run test
`

...or run with coverage:

`bash
npm run test:coverage
``

---

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

Credits

- Patrick Organ
- All Contributors

License

The MIT License (MIT). Please see License File for more information.