vue-ray

Debug your Vue code with Ray to fix problems faster.

This package can be installed in any Vue 2.x or Vue 3.x project to send messages to the Ray app.

View Demo View Github

Installation

Install with npm:

npm install vue-ray

or yarn:

yarn add vue-ray

Installing in Vue 3

When using in a Vue 3.x project (the default), import the 'vue3' variant:

import { createApp } from 'vue';
import App from './App.vue';

// as an es module import:
import RayPlugin from 'vue-ray/vue3';

// or as a commonjs import:
const { RayPlugin } = require('vue-ray/vue3');

const app = createApp(App);

app.use(RayPlugin);

Installing in Vue 2

When using in a Vue 2.x project, import the 'vue2' variant:

const Vue = require('vue');

// as an es module import:
import RayPlugin from 'vue-ray/vue2';

// or as a commonjs import:
const { RayPlugin } = require('vue-ray/vue2');

Vue.use(RayPlugin);

Usage

Once the plugin is installed, you may access the ray() method on this as this.$ray().

See the node-ray reference for a full list of available methods.

Example Component

<template>
    <div class="flex-col border-r border-gray-200 bg-white overflow-y-auto w-100">
        <div class="about">
            <h1>This is a folders page</h1>
            <a @click="sendToRay()">send folder to ray</a>
        </div>
        <div class="w-full flex flex-wrap">
            <folder ref="folder1" class="w-4/12 inline-flex"></folder>
            <folder ref="folder2" class="w-4/12 inline-flex"></folder>
        </div>
    </div>
</template>

<script>
import Folder from './Folder.vue';

export default {
    components: {
        Folder
    },
    methods: {
        sendToRay() {
            this.$ray().html(this.$refs.folder1.$el.innerHTML);
        }
    }
};
</script>

Intercepting errors (Vue 3)

The following will intercept errors in Vue 3 and send them to Ray as a red-labeled message:

import { createApp } from 'vue'
import App from './App.vue'
import RayPlugin from 'vue-ray';

const app = createApp(App);

app.use(RayPlugin);

app.config.errorHandler = function (err) {
    app.config.globalProperties.$ray(err).green();
}

app.mount('#app');

Intercepting errors (Vue 2)

The following will intercept errors in Vue 2 and send them to Ray as a red-labeled message:

import Vue from 'vue'
import App from './App.vue'
const { RayPlugin } = require('vue-ray/vue2');

Vue.use(RayPlugin);

Vue.config.errorHandler = (err) => {
    Vue.$ray(err).red();
};

new Vue({
    render: h => h(App),
}).$mount('#app');

Development setup

  • npm install
  • npm run test
  • npm run build:all

Testing

vue-ray uses Jest for unit tests. To run the test suite:

npm run test

GitHub