Debug Vue Code with Ray to Fix Problems Faster

Debug Vue Code with Ray to Fix Problems Faster

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.

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.

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 package normally:

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

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

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

const app = createApp(App);

app.use(RayPlugin, { interceptErrors: true, port: 23500, showComponentEvents: ['created', 'mounted'] });

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, { interceptErrors: true, host: '127.0.0.1', showComponentEvents: ['mounted'] });

Installation options

Name Type Default Description
host string localhost host to connect to the Ray app on
interceptErrors boolean false send Vue errors to Ray
port number 23517 port to connect to the Ray app on
showComponentEvents string[] [] display component events in Ray, see below for possible values

Component events

Component lifecycle events can be sent to Ray using the showComponentEvents plugin option (array).

Any or all of the following values can be used with this option:

  • before-create
  • before-mount
  • created
  • mounted
  • updated

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.

Vue-specific methods

Name Description
this.$ray().data() show the component data
this.$ray().props() show the component props
this.$ray().ref(name) show the innerHTML of a named ref
this.$ray().track(name) display changes to a component's data variable
this.$ray().untrack(name) stop displaying changes to a component's data variable

Tracking component data

Changes to any of a component's data variables can be tracked and displayed in real time using the track(name) method.

<script>
export default {
    props: ['title'],
    data() {
        return {
            one: 100,
            two: 22,
        };
    },
    created() {
        this.$ray().data();
        this.$ray().track('one');
    },
    mounted() {
        setInterval( () => { this.one += 3; }, 4000);
    }
}
</script>

Example Component

<template>
    <div class="flex-col border-r border-gray-200 bg-white overflow-y-auto w-100">
        <div class="about">
            <h1>{{ title }}</h1>
            <a @click="sendToRay()">send ref to ray</a><br>
            <a @click="increment()">increment data var</a><br>
        </div>
        <div ref="div1" class="w-full flex flex-wrap">
            <div ref="div1a" class="w-4/12 inline-flex">{{ one }}</div>
            <div ref="div1b" class="w-4/12 inline-flex">{{ two }}</divr>
        </div>
    </div>
</template>

<script>
export default {
    props: ['title'],
    data() {
        return {
            one: 100,
            two: 22,
        };
    },
    created() {
        this.$ray().data();
        this.$ray().track('one');
    },
    methods: {
        sendToRay() {
            this.$ray().ref('div1');
        },
        increment() {
            this.one += 3;
        }
    }
};
</script>

Intercepting errors (Vue 3)

Use the interceptErrors option to intercept errors and send them to Ray:

app.use(RayPlugin, { interceptErrors: true });

Intercepting errors (Vue 2)

Use the interceptErrors option to intercept errors and send them to Ray:

Vue.use(RayPlugin, { interceptErrors: true });

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


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

Download Details:

Author: permafrost-dev

Demo: https://myray.app/

Source Code: http://github.com/permafrost-dev/vue-ray

vue vuejs javascript

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework. Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

Vue Native is a framework to build cross platform native mobile apps using JavaScript

Vue Native is a framework to build cross platform native mobile apps using JavaScript. It is a wrapper around the APIs of React Native. So, with Vue Native, you can do everything that you can do with React Native. With Vue Native, you get

How to Make a Simple Vue Custom Select Component

In this article, you’ll learn how to build a Vue custom select component that can be easily be styled using your own CSS. In fact, it’s the same component that we use in production on Qvault, and you can see it in action on the playground.

Creating a Custom Tooltip Component in Vue

There are plenty of libraries out there that will have you up and running with a good tooltip solution in minutes. However, if you are like me, you are sick and tired of giant dependency trees that have the distinct possibility of breaking at any time.

Vue ShortKey plugin for Vue.js

Vue-ShortKey - The ultimate shortcut plugin to improve the UX .Vue-ShortKey - plugin for VueJS 2.x accepts shortcuts globaly and in a single listener.