@logux/vue-devtools

Vue devtools plugin for debugging Logux applications

Usage no npm install needed!

<script type="module">
  import loguxVueDevtools from 'https://cdn.skypack.dev/@logux/vue-devtools';
</script>

README

Logux Vue Devtools

Logux is a new way to connect client and server. Instead of sending HTTP requests (e.g., AJAX and GraphQL) it synchronizes log of operations between client, server, and other clients.

This repository contains plugin for Vue devtools browser extension for debugging Logux application based on Vue.

Logux Vue Devtools screenshot in Chrome

Install

npm install --save-dev @logux/vue-devtools

Usage

import { createApp } from 'vue'
import { devtools } from '@logux/vue-devtools'

import { client } from './logux'

let app = createApp(…)

app.use(devtools, client, {
  layers: {
    state: false
  },
  ignoreActions: ['user/add']
})

Extend

Add custom event to the timeline

import { createApp } from 'vue'
import { devtools, actionLayerId } from '@logux/vue-devtools'

import { client } from './logux'

let app = createApp(…)

app.use(devtools, client)

if (devtools.api) {
  devtools.api.addTimelineEvent({
    layerId: actionLayerId,
    event: {
      time: Date.now(),
      data: { … }
    }
  })
}