Debug Vue code with Ray to fix problems faster

npm install vue-ray

yarn add vue-ray

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

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

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

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');

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');