Front-end application for Todolist Web application built with Laravel and Vue.js

  • By Guillaume Briday
  • Last update: Dec 20, 2022
  • Comments: 11

Todolist-frontend Application

Donate Netlify Status

Frontend for https://github.com/guillaumebriday/todolist-backend-laravel app, built for a serie of articles on my blog.

If you want to see this project with Nuxt.js I created the same application available here: todolist-frontend-nuxt.

The purpose of this repository is to consume API, provide by a Laravel Application, with the Vue.js JavaScript front-end framework.

Screenshot

Some of the tools used in this project

Installation

Development environment requirements :

Setting up your development environment on your local machine :

$ git clone https://github.com/guillaumebriday/todolist-frontend-vuejs.git
$ cd todolist-frontend-vuejs
$ cp .env.example .env
$ docker-compose run --rm node yarn
$ docker-compose run --service-ports --rm node yarn hot

Useful commands

Building the app :

$ docker-compose run --rm node yarn dev

# Or

$ docker-compose run --rm node yarn watch

# Or

$ docker-compose run --rm node yarn production

Running ESLint :

$ docker-compose run --rm node yarn lint

Running tests :

$ docker-compose run --rm node yarn test

Broadcasting & WebSockets

Before using WebSockets, you need to set the PUSHER_APP_KEY key in your .env file.

You could generate a key on https://pusher.com/.

Deploy in production

This application is hosted on Netlify and available on https://todolist.guillaumebriday.me/.

More details

More details are available on my blog post : https://guillaumebriday.fr/laravel-vuejs-faire-une-todo-list-partie-1-presentation-et-objectifs (French).

Contributing

Do not hesitate to contribute to the project by adapting or adding features ! Bug reports or pull requests are welcome.

License

This project is released under the MIT license.

Github

https://github.com/guillaumebriday/todolist-frontend-vuejs

Comments(11)

  • 1

    Bug: Todos don't show up after a new account is created, unless you reload the page

    Issue: Create a brand new account at https://todolist.guillaumebriday.xyz/

    You land on https://todolist.guillaumebriday.xyz/app/active Then, start adding Todos, but NONE of them show up until you reload the page.

    I think this is a bug here.

  • 2

    Question: Where is the Laravel API code?

    Thanks for the demo at https://todolist.guillaumebriday.xyz/ Looks cool but I'm wondering if there's an end-to-end example that uses Laravel for the API /backend? Am I missing something?

  • 3

    Installation problems

    Steps I followed: $ git clone https://github.com/guillaumebriday/todolist-frontend-vuejs.git $ cd todolist-frontend-vuejs $ npm install

    npm WARN deprecated [email protected]: VUE-TEST-UILS WARN: vue-test-utils has moved to a scoped package. The new repository is available @vue/test-utils. To install the new package, run npm install --save-dev @vue/test-utils

> [email protected] install /Users/kunalpunjabi/Code/vuejs_examples/guillaumebriday_todolist/todolist-frontend-vuejs/node_modules/fsevents
> node install

node-pre-gyp WARN Using request for node-pre-gyp https download 
[fsevents] Success: "/Users/kunalpunjabi/Code/vuejs_examples/guillaumebriday_todolist/todolist-frontend-vuejs/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64/fse.node" is installed via remote

> [email protected] install /Users/kunalpunjabi/Code/vuejs_examples/guillaumebriday_todolist/todolist-frontend-vuejs/node_modules/nodent-runtime
> node build.js

## Built /Users/kunalpunjabi/Code/vuejs_examples/guillaumebriday_todolist/todolist-frontend-vuejs/node_modules/nodent-runtime/dist/index.js

> [email protected] install /Users/kunalpunjabi/Code/vuejs_examples/guillaumebriday_todolist/todolist-frontend-vuejs/node_modules/node-sass
> node scripts/install.js

Cached binary found at /Users/kunalpunjabi/.npm/node-sass/4.12.0/darwin-x64-64_binding.node

> [email protected] install /Users/kunalpunjabi/Code/vuejs_examples/guillaumebriday_todolist/todolist-frontend-vuejs/node_modules/vue-test-utils
> node build/moved-warning


VUE-TEST-UILS WARN: vue-test-utils has moved to a scoped package. 
VUE-TEST-UILS WARN: The new repository is available @vue/test-utils 
VUE-TEST-UILS WARN: To install the new package, run npm install --save-dev @vue/test-utils 


> [email protected] postinstall /Users/kunalpunjabi/Code/vuejs_examples/guillaumebriday_todolist/todolist-frontend-vuejs/node_modules/core-js
> node scripts/postinstall || echo "ignore"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon: 
> https://opencollective.com/core-js 
> https://www.patreon.com/zloirock 

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)


> [email protected] postinstall /Users/kunalpunjabi/Code/vuejs_examples/guillaumebriday_todolist/todolist-frontend-vuejs/node_modules/core-js-pure
> node scripts/postinstall || echo "ignore"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon: 
> https://opencollective.com/core-js 
> https://www.patreon.com/zloirock 

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)


> [email protected] postinstall /Users/kunalpunjabi/Code/vuejs_examples/guillaumebriday_todolist/todolist-frontend-vuejs/node_modules/node-sass
> node scripts/build.js

Binary found at /Users/kunalpunjabi/Code/vuejs_examples/guillaumebriday_todolist/todolist-frontend-vuejs/node_modules/node-sass/vendor/darwin-x64-64/binding.node
Testing binary
Binary is fine

> [email protected] postinstall /Users/kunalpunjabi/Code/vuejs_examples/guillaumebriday_todolist/todolist-frontend-vuejs/node_modules/webpack-cli
> node ./bin/opencollective.js



                            Thanks for using webpack!
                 Please consider donating to our Open Collective
                        to help us maintain this package.



              👉  Donate: https://opencollective.com/webpack/donate


npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN [email protected] requires a peer of [email protected]>=2.4.5 <=5 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of [email protected]^2.0.0 || ^3.0.0 but none is installed. You must install peer dependencies yourself.

added 1438 packages from 1102 contributors and audited 15734 packages in 48.075s
found 1 low severity vulnerability
  run `npm audit fix` to fix them, or `npm audit` for details

    Run: $ cp .env.example .env Otherwise you will see:

    Failed to load /Users/kunalpunjabi/Code/vuejs_examples/guillaumebriday_todolist/todolist-frontend-vuejs/.env.

    Then Run: $ npm run hot

    > [email protected] hot /Users/kunalpunjabi/Code/vuejs_examples/guillaumebriday_todolist/todolist-frontend-vuejs
> cross-env NODE_ENV=development webpack-dev-server --config build/webpack.dev.js --hot

    and it just hangs there...nothing happens.

    Also, what URL am I supposed to go to after this issue is resolved? Too many questions preventing me from getting this working end-to-end. The tutorial at https://guillaumebriday.fr/laravel-vuejs-faire-une-todo-list-partie-4-installer-l-application-frontend-avec-webpack is a bit too complicated - I first want to make sure that this will even work on my local machine.

  • 4

    Update dependency eslint to v6.2.2

    This PR contains the following updates:

    | Package | Type | Update | Change | |---|---|---|---| | eslint (source) | devDependencies | patch | 6.2.1 -> 6.2.2 |

    Release Notes

    eslint/eslint

    v6.2.2

    Compare Source

    Renovate configuration

    :date: Schedule: At any time (no schedule defined).

    :vertical_traffic_light: Automerge: Enabled.

    :recycle: Rebasing: Whenever PR becomes conflicted, or if you modify the PR title to begin with "rebase!".

    :no_bell: Ignore: Close this PR and you won't be reminded about this update again.

    • [ ] If you want to rebase/retry this PR, check this box

    This PR has been generated by Renovate Bot. View repository job log here.

  • 5

    Update dependency eslint-config-standard to v14.0.1

    This PR contains the following updates:

    | Package | Type | Update | Change | |---|---|---|---| | eslint-config-standard | devDependencies | patch | 14.0.0 -> 14.0.1 |

    Release Notes

    standard/eslint-config-standard

    v14.0.1

    Compare Source

    Renovate configuration

    :date: Schedule: At any time (no schedule defined).

    :vertical_traffic_light: Automerge: Enabled.

    :recycle: Rebasing: Whenever PR becomes conflicted, or if you modify the PR title to begin with "rebase!".

    :no_bell: Ignore: Close this PR and you won't be reminded about this update again.

    • [ ] If you want to rebase/retry this PR, check this box

    This PR has been generated by Renovate Bot. View repository job log here.

  • 6

    Update Font Awesome (patch)

    This PR contains the following updates:

    | Package | Type | Update | Change | |---|---|---|---| | @fortawesome/fontawesome-svg-core (source) | dependencies | patch | 1.2.21 -> 1.2.22 | | @fortawesome/free-brands-svg-icons (source) | dependencies | patch | 5.10.1 -> 5.10.2 | | @fortawesome/free-regular-svg-icons (source) | dependencies | patch | 5.10.1 -> 5.10.2 | | @fortawesome/free-solid-svg-icons (source) | dependencies | patch | 5.10.1 -> 5.10.2 |

    Release Notes

    FortAwesome/Font-Awesome

    v5.10.2

    Compare Source

    Added
    • SVG with JS API function layers() now accepts params to add additional classes
    Changed
    • Lots of updates to various duotone icons
    • Updated the keybase brand icon
    Fixed

    Renovate configuration

    :date: Schedule: At any time (no schedule defined).

    :vertical_traffic_light: Automerge: Enabled.

    :recycle: Rebasing: Whenever PR becomes conflicted, or if you modify the PR title to begin with "rebase!".

    :ghost: Immortal: This PR will be recreated if closed unmerged. Get config help if that's undesired.

    • [ ] If you want to rebase/retry this PR, check this box

    This PR has been generated by Renovate Bot. View repository job log here.

  • 7

    Update dependency eslint to v6.2.1 - autoclosed

    This PR contains the following updates:

    | Package | Type | Update | Change | |---|---|---|---| | eslint (source) | devDependencies | minor | 6.1.0 -> 6.2.1 |

    Release Notes

    eslint/eslint

    v6.2.1

    Compare Source

    • 8c021b5 Upgrade: eslint-utils 1.4.2 (#​12131) (Toru Nagashima)
    • e82388b Sponsors: Sync README with website (ESLint Jenkins)
    • 4aeeeed Docs: update docs for ecmaVersion 2020 (#​12120) (silverwind)
    • 6886148 Docs: Add duplicate keys limitation to accessor-pairs (#​12124) (Milos Djermanovic)

    v6.2.0

    Compare Source

    • fee6acb Update: support bigint and dynamic import (refs #​11803) (#​11983) (Toru Nagashima)
    • afd8012 New: noInlineConfig setting (refs eslint/rfcs#​22) (#​12091) (Toru Nagashima)
    • 3d12378 Update: Fix accessor-pairs to enforce pairs per property in literals (#​12062) (Milos Djermanovic)
    • 8cd00b3 New: function-call-argument-newline (#​12024) (finico)
    • 30ebf92 Fix: prefer-template autofix produces syntax error with octal escapes (#​12085) (Milos Djermanovic)
    • 13c3988 Fix: Check literal type explicitly in dot-notation (#​12095) (Milos Djermanovic)
    • 3e5ceca Fix: Handle empty string property names in getFunctionNameWithKind (#​12104) (Milos Djermanovic)
    • 9a043ff Fix: no-duplicate-case false positives on Object.prototype keys (#​12107) (Milos Djermanovic)
    • fe631af Chore: minor typo fix (#​12112) (James George)
    • 4cb7877 Fix: fix no-extra-parens ignores some nodes (#​11909) (Pig Fang)
    • 2dc23b8 Update: fix no-dupe-keys false negatives on empty string names (#​12069) (Milos Djermanovic)
    • 19ab666 Fix: yoda exceptRange false positives on empty string property names (#​12071) (Milos Djermanovic)
    • d642150 Update: Check empty string property names in sort-keys (#​12073) (Milos Djermanovic)
    • acce6de Fix: class-methods-use-this reports 'undefined' names (#​12103) (Milos Djermanovic)
    • 92ec2cb Fix: Allow bind call with a single spread element in no-extra-bind (#​12088) (Milos Djermanovic)
    • bfdb0c9 Fix: no-extra-boolean-cast invalid autofix for Boolean() without args (#​12076) (Milos Djermanovic)
    • 34ccc0c Chore: Remove TDZ scope type condition from no-unused-vars (#​12055) (Milos Djermanovic)
    • 01d38ce Docs: Remove TDZ scope from the scope manager interface documentation (#​12054) (Milos Djermanovic)
    • 1aff8fc Update: warn about mixing ternary and logical operators (fixes #​11704) (#​12001) (Karthik Priyadarshan)
    • 11be2f8 Docs: do not recommend global-installed usage (#​12016) (薛定谔的猫)
    • cf31dab Fix: no-restricted-syntax - correct the schema (#​12051) (Brad Zacher)
    • fbec99e Update: fix class-methods-use-this false negatives with exceptMethods (#​12077) (Milos Djermanovic)
    • fb08b7c Docs: Remove readonly/writable global logic from no-undef (fixes #​11963) (#​12053) (Milos Djermanovic)
    • 5b5934b Sponsors: Sync README with website (ESLint Jenkins)
    • 9156760 Sponsors: Sync README with website (ESLint Jenkins)
    • f5e0cc4 Update: Check computed method keys in no-extra-parens (#​11973) (Milos Djermanovic)
    • d961438 Docs: Fix Incorrect Documentation (#​12045) (Michael Miceli)
    • 887d08c Sponsors: Sync README with website (ESLint Jenkins)
    • d90183f Docs: add a case to func-names (#​12038) (Chiawen Chen)
    • 8a5b62d Docs: no use eslint.linter in code example (#​12037) (薛定谔的猫)
    • 5831767 Update: report location of func-names (fixes #​12022) (#​12028) (Pig Fang)

    Renovate configuration

    :date: Schedule: At any time (no schedule defined).

    :vertical_traffic_light: Automerge: Enabled.

    :recycle: Rebasing: Whenever PR becomes conflicted, or if you modify the PR title to begin with "rebase!".

    :no_bell: Ignore: Close this PR and you won't be reminded about this update again.

    • [ ] If you want to rebase/retry this PR, check this box

    This PR has been generated by Renovate Bot. View repository job log here.

  • 8

    Update dependency tailwindcss to v1

    This PR contains the following updates:

    | Package | Type | Update | Change | |---|---|---|---| | tailwindcss (source) | dependencies | major | ^0.7.4 -> ^1.0.0 |

    Release Notes

    tailwindcss/tailwindcss

    v1.0.5

    Compare Source

    • Support built-in variants for utilities that include pseudo-elements (#​970)
    • Update several dependencies, including postcss-js which fixes an issue with using !important directly in Tailwind utility plugins

    v1.0.4

    Compare Source

    • Increase precision of percentage width values to avoid 1px rounding issues in grid layouts (#​961)

    v1.0.3

    Compare Source

    • Throws an error when someone tries to use @tailwind preflight instead of @tailwind base, this is the source of many support requests

    v1.0.2

    Compare Source

    • Fixes a bug where @screen rules weren't bubbled properly when nested in plugins (#​941)

    v1.0.1

    Compare Source

    • Fixes a bug where global variants weren't properly merged (#​911)

    v1.0.0

    Compare Source

    Renovate configuration

    :date: Schedule: At any time (no schedule defined).

    :vertical_traffic_light: Automerge: Disabled by config. Please merge this manually once you are satisfied.

    :recycle: Rebasing: Whenever PR becomes conflicted, or if you modify the PR title to begin with "rebase!".

    :no_bell: Ignore: Close this PR and you won't be reminded about this update again.

    • [ ] If you want to rebase/retry this PR, check this box

    This PR has been generated by Renovate Bot. View repository job log here.

  • 9

    Configure Renovate

    Welcome to Renovate! This is an onboarding PR to help you understand and configure settings before regular Pull Requests begin.

    :vertical_traffic_light: To activate Renovate, merge this Pull Request. To disable Renovate, simply close this Pull Request unmerged.

    Detected Package Files

    • docker-compose.yml (docker-compose)
    • package.json (npm)

    Configuration Summary

    Based on the default config's presets, Renovate will:

    • Start dependency updates only once this Configure Renovate PR is merged
    • Separate major versions of dependencies into individual branches/PRs
    • Do not separate patch and minor upgrades into separate PRs for the same dependency
    • Upgrade to unstable versions only if the existing version is unstable
    • Raise PRs immediately (after branch is created)
    • Use renovate/ as prefix for all branch names
    • If semantic commits detected, use semantic commit type fix for dependencies and chore for all others
    • Keep existing branches updated even when not scheduled
    • Disable automerging feature - wait for humans to merge all PRs
    • Ignore node_modules, bower_components, vendor and various test/tests directories
    • Update existing lock files only when package.json is modified
    • Autodetect whether to pin dependencies or maintain ranges
    • Rate limit PR creation to a maximum of two per hour
    • Limit to maximum 20 open PRs at any time
    • Group known monorepo packages together
    • Use curated list of recommended non-monorepo package groupings

    :abcd: Would you like to change the way Renovate is upgrading your dependencies? Simply edit the renovate.json in this branch with your custom config and the list of Pull Requests in the "What to Expect" section below will be updated the next time Renovate runs.

    What to Expect

    With your current configuration, Renovate will create 14 Pull Requests:

    Pin dependencies
    Update Font Awesome
    Update dependency copy-webpack-plugin to v5.0.2
    • Schedule: "at any time"
    • Branch name: renovate/copy-webpack-plugin-5.x
    • Upgrade copy-webpack-plugin to 5.0.2
    Update dependency css-loader to v2.1.1
    • Schedule: "at any time"
    • Branch name: renovate/css-loader-2.x
    • Upgrade css-loader to 2.1.1
    Update dependency eslint to v5.16.0
    • Schedule: "at any time"
    • Branch name: renovate/eslint-5.x
    • Upgrade eslint to 5.16.0
    Update dependency eslint-plugin-promise to v4.1.1
    • Schedule: "at any time"
    • Branch name: renovate/eslint-plugin-promise-4.x
    • Upgrade eslint-plugin-promise to 4.1.1
    Update dependency expect to v24.7.1
    • Schedule: "at any time"
    • Branch name: renovate/jest-monorepo
    • Upgrade expect to 24.7.1
    Update dependency luxon to v1.12.0
    • Schedule: "at any time"
    • Branch name: renovate/luxon-1.x
    • Upgrade luxon to 1.12.0
    Update dependency vue-analytics to v5.16.4
    • Schedule: "at any time"
    • Branch name: renovate/vue-analytics-5.x
    • Upgrade vue-analytics to 5.16.4
    Update dependency webpack-cli to v3.3.0
    • Schedule: "at any time"
    • Branch name: renovate/webpack-cli-3.x
    • Upgrade webpack-cli to 3.3.0
    Update vue monorepo to v2.6.10
    • Schedule: "at any time"
    • Branch name: renovate/vue-monorepo
    • Upgrade vue to 2.6.10
    • Upgrade vue-template-compiler to 2.6.10
    Update dependency babel-eslint to v10
    • Schedule: "at any time"
    • Branch name: renovate/babel-eslint-10.x
    • Upgrade babel-eslint to 10.0.1
    Update dependency babel-loader to v8
    • Schedule: "at any time"
    • Branch name: renovate/babel-loader-8.x
    • Upgrade babel-loader to 8.0.5
    Update dependency jsdom to v14
    • Schedule: "at any time"
    • Branch name: renovate/jsdom-14.x
    • Upgrade jsdom to 14.0.0

    :children_crossing: Branch creation will be limited to maximum 2 per hour, so it doesn't swamp any CI resources or spam the project. See docs for prhourlylimit for details.

    :question: Got questions? Check out Renovate's Docs, particularly the Getting Started section. If you need any further assistance then you can also request help here.

    This PR has been generated by Renovate Bot. View repository job log here.

  • 10

    Update dependency cross-env to v6

    This PR contains the following updates:

    | Package | Type | Update | Change | |---|---|---|---| | cross-env | devDependencies | major | 5.2.1 -> 6.0.0 |

    Release Notes

    kentcdodds/cross-env

    v6.0.0

    Compare Source

    Bug Fixes
    BREAKING CHANGES
    • Drop support for Node.js < 7.

    Renovate configuration

    :date: Schedule: At any time (no schedule defined).

    :vertical_traffic_light: Automerge: Disabled by config. Please merge this manually once you are satisfied.

    :recycle: Rebasing: Whenever PR becomes conflicted, or if you modify the PR title to begin with "rebase!".

    :no_bell: Ignore: Close this PR and you won't be reminded about this update again.

    • [ ] If you want to rebase/retry this PR, check this box

    This PR has been generated by Renovate Bot. View repository job log here.

  • 11

    Update dependency eslint-plugin-node to v10

    This PR contains the following updates:

    | Package | Type | Update | Change | |---|---|---|---| | eslint-plugin-node | devDependencies | major | 9.2.0 -> 10.0.0 |

    Release Notes

    mysticatea/eslint-plugin-node

    v10.0.0

    Compare Source

    This release supports BigInt and Dynamic Imports if you are using ESLint 6.2.0 or later.

    💥 Breaking Changes

    • 9ea67c9 updated node/no-unsupported-features/es-syntax rule to recognize BigInt literals and import().
    • b91b48d updated node/no-unsupported-features/es-builtins rule to recognize BigInt, BigInt64Array, BigUint64Array, and Promise.allSettled.
    • b57a4f9 updated node/file-extension-in-import, node/no-extraneous-import, node/no-missing-import, and node/no-unpublished-import rules to recognize import().
    • 4b9c4d7 updated node/no-deprecated-api rule to recognize module.createRequireFromPath.
    • 9c574ba updated plugin:node/recommended and the other configs.
      • It added node/no-exports-assign rule.
      • It changed exports global variable writable.
      • It enabled node/*-import rules in CommonJS mode as well.

    ✨ New rules

    • a0f0ee1 added node/no-exports-assign rule that disallows exports = {}.

    Renovate configuration

    :date: Schedule: At any time (no schedule defined).

    :vertical_traffic_light: Automerge: Disabled by config. Please merge this manually once you are satisfied.

    :recycle: Rebasing: Whenever PR becomes conflicted, or if you modify the PR title to begin with "rebase!".

    :no_bell: Ignore: Close this PR and you won't be reminded about this update again.

    • [ ] If you want to rebase/retry this PR, check this box

    This PR has been generated by Renovate Bot. View repository job log here.

Popular Tag

Related