Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Mirazex/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/Mirazex/vuex-overlay
monitoring state-management tools vue vue3 vuex vuex-overlay vuex4
Last synced: about 2 months 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/Mirazex/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-04-15T06:14:07.791Z (5 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
Awesome Lists containing this project
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)