Light

bahmutov / vue-vuex-todomvc Goto Github PK

View Code? Open in Web Editor NEW

47.0 2.0 19.0 702 KB

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

JavaScript 92.32% HTML 7.68%

vue vuex vuejs todomvc example cypress-example

vue-vuex-todomvc's Introduction

vue-vuex-todomvc

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

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

vue-vuex-todomvc's People

Contributors

Stargazers

Watchers

Forkers

wooodhead huxianfeng lixiaodong niti11 apollotang natuanorg gavinchua woto yeahnoob hapiben yolocodefrench abdallahdev22 samlucax raffine ivan-slavchev elecdream bubafinder dwelsh1 gtechsltn

vue-vuex-todomvc's Issues

An in-range update of cypress is breaking the build 🚨

Version 2.0.1 of cypress was just published.

Branch	Build failing 🚨
Dependency	cypress
Current Version	2.0.0
Type	devDependency

This version is covered by your current version range and after updating it in your project the build failed.

cypress is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

❌ continuous-integration/travis-ci/push The Travis CI build failed Details

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

Your Greenkeeper Bot 🌴

An in-range update of start-server-and-test is breaking the build 🚨

☝️ Greenkeeper’s updated Terms of Service will come into effect on April 6th, 2018.

Version 1.1.0 of start-server-and-test was just published.

Branch	Build failing 🚨
Dependency	start-server-and-test
Current Version	1.0.1
Type	devDependency

This version is covered by your current version range and after updating it in your project the build failed.

start-server-and-test is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

❌ continuous-integration/travis-ci/push The Travis CI build could not complete due to an error Details

Release Notes

v1.1.0

1.1.0 (2018-03-14)

New features 👍

kill any child processes of server (#3) (ce26532)

Commits

The new version differs by 1 commits.

ce26532 feat: kill any child processes of server (#3)

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

Your Greenkeeper Bot 🌴

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

Update dependency todomvc-app-css to v2.4.3

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Detected dependencies

github-actions

.github/workflows/badges.yml

actions/checkout v3

stefanzweifel/git-auto-commit-action v4

ubuntu 20.04

.github/workflows/ci.yml

actions/checkout v3

cypress-io/github-action v4

ubuntu 20.04

npm

package.json

json-server 0.17.1

todomvc-app-css 2.4.2

todomvc-common 1.0.5

cy-spok 1.6.1

cypress 11.2.0

json-server-reset 1.6.0

prettier 2.8.4

prettier-standard 16.4.1

standard 17.0.0

start-server-and-test 1.15.4

Check this box to trigger a request for Renovate to run again on this repository

Connect store to REST backend

from the Vuex actions

Action Required: Fix Renovate Configuration

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: Preset name not found within published preset config (monorepo:angularcli). Note: this is a nested preset so please contact the preset author if you are unable to fix it yourself.

Allow deleting todos

Just to make it more interesting

Allow uploading a list of todos from a file

probably JSON file

https://bootstrap-vue.js.org/docs/components/form-file/

with E2E tests that get around native file event: cypress-io/cypress#170 (comment)

Update to work with the latest Vue and Vuex versions

The latest version of vue by the time is 3.4 and vuex is 5.
Would be realy nice to use them, instead of 2.5 and 3 if it's possible.

Add GUI tests

Using Cypress.io

Add API tests

Using Cypress https://www.cypress.io/blog/2017/11/07/Add-GUI-to-Your-E2E-API-Tests/

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.