Vue
You can send information from Vue (2.x or 3.x) code to Ray via this third party package:
##Installing the package
You can install this third-party package using either npm
or yarn
:
npm install vue-ray
yarn add vue-ray
##Installing in Vue 3
When using in a Vue 3.x project, import the package and install the plugin in your entry file:
import { createApp } from 'vue';
import App from './App.vue';
import RayPlugin from 'vue-ray';
const app = createApp(App);
app.use(RayPlugin, { interceptErrors: true, host: '127.0.0.1', port: 23517 });
##Installing in Vue 2
When using in a Vue 2.x project, import the 'vue2' export variant and install the plugin in your entry file:
const Vue = require('vue');
const { RayPlugin } = require('vue-ray/vue2');
Vue.use(RayPlugin, { interceptErrors: true, host: '127.0.0.1', port: 23517 });
##Installing the Vuex plugin
In either a Vue 2.x or 3.x project, using installing the vuex plugin will send the vuex state to Ray whenever a mutation is called, in a manner similar to the track()
method.
// ...
import { RayVuexPlugin } from 'vue-ray'; // or 'vue-ray/vue2' if using Vue 2.x
// ...
const storeObj = {
state: {
one: 11,
two: 22,
},
mutations: {
incrementOne(state) {
state.one += 1;
},
incrementTwo(state) {
state.two += 2;
},
},
actions: {},
modules: {},
plugins: [RayVuexPlugin],
};
// Vue 3:
export default createStore(storeObj);
// Vue 2:
export default new Vuex.Store(storeObj);