https://github.com/MyraxByte/vuex-overlay

Vuex state monitoring tool (for Vue 3) - temporary alternative instead of vue-devtools (vuex functionality). If you want new features - add request in issues or create new pull-request
https://github.com/MyraxByte/vuex-overlay

monitoring state-management tools vue vue3 vuex vuex-overlay vuex4

Last synced: 26 days ago
JSON representation

Vuex state monitoring tool (for Vue 3) - temporary alternative instead of vue-devtools (vuex functionality). If you want new features - add request in issues or create new pull-request

• Host: GitHub
• URL: https://github.com/MyraxByte/vuex-overlay
• Owner: MyraxByte
• License: gpl-3.0
• Archived: true
• Created: 2021-01-02T02:24:51.000Z (over 3 years ago)
• Default Branch: stable
• Last Pushed: 2021-01-21T06:56:51.000Z (over 3 years ago)
• Last Synced: 2024-01-28T21:59:55.339Z (4 months ago)
• Topics: monitoring, state-management, tools, vue, vue3, vuex, vuex-overlay, vuex4
• Language: CSS
• Homepage: https://www.npmjs.com/package/vuex-overlay-tools
• Size: 86.9 KB
• Stars: 11
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• awesome-vue - vuex-overlay-tools - 🛠 A Vue 3 plugin for monitoring Vuex store (time-travel is also supported) (Components & Libraries / Utilities)

README

        
## Vuex Overlay Tool

![](https://i.imgur.com/ANnsWdu.jpeg)

![npm](https://img.shields.io/npm/dm/vuex-overlay-tools?color=0b1015&style=for-the-badge) ![npm](https://img.shields.io/npm/v/vuex-overlay-tools?color=0b1015&label=version&style=for-the-badge) ![NPM](https://img.shields.io/npm/l/vuex-overlay-tools?color=0b1015&style=for-the-badge)

I like Vue, but latest release (Vue 3) is working only with new `vue-devtools` version and there is no Vuex at this moment.

And I must to create a temporary solution for this problem - `vuex-overlay-tool`.

**Vuex Overlay Tool** plugin for **Vue 3** provides monitoring of the state in the store with feature from `vue-devtools` time-travel.

## Features

* overlay panel with Vuex store from your app

* mutations history

* state & getters overview

* time travel for mutations

## Getting Started

Required

[Vuex 4](https://github.com/vuejs/vuex) & [Vue 3](https://github.com/vuejs/vue-next)

Install

```bash

$ npm install vuex-overlay-tools

# or

$ yarn add vuex-overlay-tools

```

## Usage

`Your application must have Vuex Store`

###### Step 1 - Add VuexOverlay plugin to you application

```js

import { createApp } from "vue";

import VuexOverlay from "vuex-overlay-tools"

import { store } from "./store" // path to vuex store

import App from "./App.vue"

createApp(App)

  .use(store) // required

  .use(VuexOverlay) // add plugin to your app

  .mount('#app')

```

###### Step 2 - Open panel with special button

![](https://i.imgur.com/YcDdvJs.png)

## Previews

###### `State Overview` 

![](https://i.imgur.com/CxFL2Dv.gif)

###### `Getters Overview`

![](https://i.imgur.com/fJBWo73.png)

###### `Mutations History`

![](https://i.imgur.com/FxiBjKJ.png)