drehimself/todo-vue

Code for YouTube series on building a Todo App in Vue.js

Vue.js Todo App

Code for YouTube Series on building a Todo App using Vue.js: YouTube Link

Note: Each video has a corresponding branch. The master branch is up to date with the latest video.

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

Specific Branch

If you want to checkout a certain branch:

git branch -a to list all the branches.

git checkout 01-basics (or any branch) to check it out.

Laravel API

The Laravel API repo can be found here.

todo-vue's Issues

Manually adding a false access token allows access to protected routes

Hi, If you manually add an access_token = 'whatever' to local storage, you can get access to protected routes.

Would it be better to check the validity of the access token rather than check that one exists in the state?

Error at register

I get error in console when I want to register:

Error: Network Error

This is at "Sources" in Cosole at line 96: .catch(error => {

error = Error: Network Error at createError (webpack-internal:///./node_modules/axios/lib/core/createError.js:16:15) at XMLHttpRequest.handleError

I dont know why the &times did not show in right places

  <div v-for="todo in todos" :key="todo.id" class="todo-items">
    <div>
      {{ todo.title }}
      <div class="remove-item">
        &times;
      </div>
    </div>

Failed on install dependencies

Could you please specify the node version you've used and check that all dependencies are alive
Thank you!

Vuejs Draggable Component in Draggable Component

Hi, I am using Vuejs on the project and I am learning Vuejs just recently. There is a challenge to compare;
1- There are three separate components, each of them will be draggable in itself
2- These three components can be draggable in a single line at the same time

Would you please help me with this?

httpOnly cookie instead of local storage?

Hi Dre,

In your youtube video regarding Authentication, you stated "I'll look into making a video on how to use cookies instead of local storage."

Was this video made yet? Thank you so much for all you do!

Issue with sass loader and web pack

error in ./src/components/TodoList.vue

Module build failed: TypeError: this.getResolve is not a function
at Object.loader (/Users/nitishharsoor/node_modules/sass-loader/dist/index.js:52:26)

@ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-3de4
7834","scoped":false,"hasInlineConfig":false}!/Users/nitishharsoor/node_modules/sass-loader/dist/cjs.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/TodoList.vue 4:14-386 13:3-17:5 14:22-394
@ ./src/components/TodoList.vue
@ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue
@ ./src/App.vue
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

my package.json is

{
"name": "todo-app",
"version": "1.0.0",
"description": "A Vue.js project",
"author": "punitkmryh [email protected]",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js"
},
"dependencies": {
"ajv": "^6.12.0",
"node-sass": "^4.13.1",
"sass-loader": "^6.0.7",
"vue": "^2.5.2"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"chalk": "^2.0.1",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"node-notifier": "^5.1.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-url": "^7.2.1",
"rimraf": "^2.6.0",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}

Duplicate id in store

Hi @drehimself
I found an issue with the ids in the store as I have 5 records in the database starting from id 1. Now If I add several more items, the next items will have a manually generated id which will result in the following error:

[Vue warn]: Duplicate keys detected: '4'. This may cause an update error.

The reason for this is that you start with a hard coded id here:

todo-vue/src/components/TodoList.vue

Line 48 in 9487b27

idForTodo: 3,

How can this be fixed?