Vuenut is a component to develop faster and more fluently.

1Hello, welcome toVuenut

If you are already here because you love it like we do, this library is created to manipulate and visualize state management pattern in the case of vuejs (Vuex) the main idea is to facilitate the development and maintenance of data in an application.

Vuenut is a library based on vue js to use it we have to have the entire vue ecosystem added to our project e install the dependency in the case of using webpack if you do not just have to compile the cdn like any other library.

Well already added Vuenut in your great project you will see a circle on the left with an arrow, this circle is a button to open and close vuenut then let's open it.

2Features in Display Store

First of all when we create a complex system or application we need a store with a lot of data and a fairly extensive structure with nodes, children, parents, siblings, array, objects and different types of data Vuenut found the solution of making a tree of nodes as if we visualized a normal json but with some properties that you will surely love.

                                     
Characteristic Description Execution
Display Store view independent nodes open and close them to see the data without losing much Encuanetra when opening Vuenut with the name of state is the main node
Copy node path Find the exact value route within our beloved store (this is one of the best features) Inside the node display each one has a Icon my_location you just have to click and the route is copied automatically.
Copy Store to node We can copy the entire store within a specific node that would return everything to us in a json string Inside the node display each one has a Icon content_copy you just have to click and the entire store is copied within the.
Change format within a node the display of each node can change from a tree structure to a common json-shaped string Inside the node display each one has a Icon flip you just have to click and the display format of all the child nodes will be changed.
Edit the value of a node To edit the value within a node if you do not have any children and be a valid value In each child node that does not have other children we can edit its value by clicking on it (if it is a data type (boolean) a checbox appears check_box : true , check_box_outline_blank : false , for better handling of the data).

3 Features General

Vuenut has some features designed for faster development and production, we love producing and programming.

Characteristic Description Execution
Edit current store If you need to edit the store live or change its structure, within the edit there are some aggravating features such as obfuscating the store or formatting When you click on the first (1) button inside the main menu the referential icon is create
Copy Store When you need to copy the entire store By clicking on the second (2) button inside the main menu the referential icon is content_copy
Save Current Store You can save the current store to use it later at any time regardless of whether the page is reloaded or the browser is closed (it is saved in the browser storage) By clicking on the Third (3) button inside the main menu the referential icon is cloud_upload
My saved stores Where are my stores? Saved stores are stored in the browser storage to reuse them whenever you want, there are features within this option such as export , Place and for last Delete By clicking on the fourth (4) button inside the main menu the referential icon is folder
Change store format (tree | json string) We have an option to change the format of how to display the store can be as default (nodes) or change (json string) for a complete structure By clicking on the fifth (5) button inside the main menu the referential icon is flip
Change store format (tree | json string) We have an option to change the format of how to display the store can be as default (nodes) or change (json string) for a complete structure By clicking on the fifth (5) button inside the main menu the referential icon is flip
Component Full Screen Do you need space? you can put the component in full size By clicking on the Sixth (6) button inside the main menu the referential icon is flip
Export current store With this feature you can export all the current store to save it in the PC as a format (.json), this feature is intended to share the current data with another developer or to replicate errors By clicking on the seventh (7) button inside the main menu the referential icon is move_to_inbox
Import current store After exporting a store or creating it with the extension (.json) you can import it to replace the current one By clicking on the eighth (8) button inside the main menu the referential icon is unarchive
Night mode We are lovers of programming and we love to develop so at night so vuenut has the night mode so you never stop. By clicking on the ninth (9) button inside the main menu the referential icon is hdr_strong

4 Configurations

Vuenut It has some consas that you can configure and details that make the difference when viewing or developing. to enter the settings go to the last button with the referential icon settings

Characteristic Description Execution
Change the primary color You can change the main color of vuenut, we know that we love to customize everything to our liking, you can easily return to the default color at any time. In the configurations the first button with the name (color)
Arrow sticky The vuenut open and close button is sticky and if it's annoying for you, you can remove that functionality and leave it static. In the configurations the second button (2) with the reference (Arrow sticky)
Font size vuenut by default has a font size (16px) that may be small for some so you can increase or decrease the size with a maximum of (24px). In the configurations the third button (3) with the reference (Font size)
Restore Some vuenut data is saved you can restore the complete component. color, funt-size, stores saved among others. In the configurations the fourth button (4) with the reference (Restore)

videogame_asset Play Ground

Like any developer we want to play with our new toy so get to work.

Let's see how vuenut reflects the data changes in the application and viseversa.

  • Change the data inside this input and see the node inside vuenut ( state> vuenut )

    Now that you have seen the change in vuenut , change the data from the node by clicking on the value and see how the data changes immediately in the input.
  • In vuenut the data boolean changes them with a checbox for better handling, changes the value of this checbox and displays the data in vuenut ( state> boolean ) Value: {{this.$store.state.boolean? 'True': 'false'}}
  • Now because we do not do something a little more complex to test the power of vuenut.
    1) First change the value of this input that is reflected in vuenut ( state> clickOnMyValue )
    2) Now that we have changed the data of our store, we will save it to use it later.
    __ 2.1) go to the save button with the reference icon cloud_upload , save the store with the name that more like it

    3) Restart the page or change the input value again.

    4) After having a different value go to the store saved reference icon folder , you can see there is the store saved with the name before set, click on the put store button with the referential icon unarchive Ready and our store saved this post, check the input with the previous value ! Great the saved data are now as before.

  • You can continue playing with vuenut as much as you want to try all the functionalities.
    If you want more freedom you can go to our Codepen