All Projects → bahmutov → vue-vuex-todomvc

bahmutov / vue-vuex-todomvc

Licence: other
Example TodoMVC Vue.js app with Vuex store and server backend via REST

Programming Languages

javascript
184084 projects - #8 most used programming language
HTML
75241 projects

Projects that are alternatives of or similar to vue-vuex-todomvc

todo-graphql-example
Example Todo app on top of json-graphql-server
Stars: ✭ 20 (-51.22%)
Mutual labels:  example, todomvc, cypress-example
workshop-todo-dapp
A workshop into adding realtime collaboration in a typical To-do app
Stars: ✭ 29 (-29.27%)
Mutual labels:  example, todomvc
Golang Gin Realworld Example App
Exemplary real world application built with Golang + Gin
Stars: ✭ 1,780 (+4241.46%)
Mutual labels:  example, todomvc
Todomvc Ddd Cqrs Eventsourcing
Implementation of basic Todo app via tastejs/todomvc in C#/Typescript with eventsourcing, cqrs, and domain driven design
Stars: ✭ 134 (+226.83%)
Mutual labels:  example, todomvc
example-orbitdb-todomvc
TodoMVC with OrbitDB
Stars: ✭ 17 (-58.54%)
Mutual labels:  example, todomvc
next-and-cypress-example
Next.js example instrumented for code coverage from Cypress tests
Stars: ✭ 111 (+170.73%)
Mutual labels:  cypress-example
djcra
Django ❤️ create-react-app integration example
Stars: ✭ 12 (-70.73%)
Mutual labels:  example
graphql-example
Intuitive GraphQL Resolver Example - Application example using RawModel.js as GraphQL rootValue on steroids.
Stars: ✭ 25 (-39.02%)
Mutual labels:  example
code-tour-rs
Enhanced example-based learning, i.e. awesome example user experience
Stars: ✭ 20 (-51.22%)
Mutual labels:  example
python-in-browser
🐍🛥🌟 Running Python in the browser with Batavia and Starlette
Stars: ✭ 12 (-70.73%)
Mutual labels:  example
laravel-docker-redis
Simple example: How to use laravel and redis using docker compose
Stars: ✭ 23 (-43.9%)
Mutual labels:  example
UWO
Unity WebGL x WebSocket MMO demo
Stars: ✭ 49 (+19.51%)
Mutual labels:  example
work with stagesepx
about how to use stagesepx in production
Stars: ✭ 41 (+0%)
Mutual labels:  example
tensorflow flask
tensorflow model deployment in flask REST API
Stars: ✭ 26 (-36.59%)
Mutual labels:  example
solana-web3-demo
a quick demo for solana web3
Stars: ✭ 93 (+126.83%)
Mutual labels:  example
go-wasm-examples
Some small examples of using Go and WebAssembly
Stars: ✭ 22 (-46.34%)
Mutual labels:  example
play-scala-anorm-example
Example Play Database Application using Anorm
Stars: ✭ 41 (+0%)
Mutual labels:  example
APIConnectors
A curated list of example code to collect data from Web APIs using DataPrep.Connector.
Stars: ✭ 22 (-46.34%)
Mutual labels:  example
match stream
A sample project to show in our scale blog post
Stars: ✭ 30 (-26.83%)
Mutual labels:  example
play-scala-secure-session-example
An example Play application showing encrypted session management
Stars: ✭ 54 (+31.71%)
Mutual labels:  example

vue-vuex-todomvc renovate-app badge ci status cypress version

Simple TodoMVC with Vue.js and Vuex data store.

Based on this Vuex tutorial and the basic official TodoMVC vue.js example

Read my step by step tutorial explaining the code and this thorough blogpost how this application is tested using Cypress.

Software organization

Vue Vuex REST data flow

Use

Clone this repository then

npm install
npm start

Open localhost:3000 in the browser.

Tests

All tests are implemented using Cypress.io

cy-spok example

See the spec new-item-spec.js that shows how to use cy-spok plugin to confirm the request object. Watch the introduction to cy-spok plugin video here.

Development

The app global variable exposes the Vue instance.

To see "plain" values from the store (without all Observer additions)

app.$store.getters.todos
    .map(JSON.stringify) // strips utility fields
    .map(JSON.parse)     // back to plain objects
    .forEach(t => console.log(t)) // prints each object

Or print them as a table

console.table(app.$store.getters.todos.map(JSON.stringify).map(JSON.parse))

Small print

Author: Gleb Bahmutov <[email protected]> © 2021

License: MIT - do anything with the code, but don't blame me if it does not work.

Support: if you find any problems with this module, email / tweet / open issue on Github

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].