PRE-REQUISITES AND RESOURCES
If you have made it this far, we are making a few assumptions about you and your project. If any of the following points are baffling to you, it might be a good idea to check out some of the great resources below before continuing:
- You should have already set-up or are able to set-up a basic Vue application with a module system utilizing Webpack or Browserify. Getting Started with Vue Module Build Systems
- You should have a basic understanding of what Vuex and Redux are and why you would want to use either, or in this case both. Check out our blog post (link).
- You are comfortable setting up a Redux store or have a pre-existing store ready to go with all associated ACTION TYPES , ACTION CREATORS, and REDUCERS. Setting up your Redux Store.
FIRING UP A SIMPLE VUEDEUX EXAMPLE - TODO MVC
Head on over to our GitHub repository https://github.com/Vuedeux/vuedeux , fork it, clone down a copy, and navigate to the directory within your terminal.
To download and install all dependencies
run npm install
Start up the dev server
npm start
You should now be able to navigate to http://localhost:8080/ to demo the app.
The architecture of this classic TODO MVC app can be found in the example folder and offers a simple example of the Vuedeux data flow from VueX to Redux and back.
SETTING UP VUEX AND REDUX DEV TOOLS
One of the advantages of using Vuedeux is the ability to use tools from both the Redux and Vuex communities. We recommend both the Official Vue Chrome Dev Tool as well as the Redux Chrome Dev-tools as a handy way of visualizing your applications state changes being relayed between Vuex and Redux. You can also utilize both tools' time travel and debugging functionality.
VueJS Chrome Dev Tools
Download from Chrome Store @ VueJS Chrome Dev Tools
The Official Vue Chrome Dev tool auto-detects your Vue and Vuex instances and is ready to go.
Redux Chrome DevTools
Download from Chrome Store @ Redux Chrome DevTool
The Redux Chrome Dev tool requires just a tiny bit of setup when you initiate your Redux store. Check out the documentation.