Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/guillaumebriday/todolist-frontend-vuejs
Front-end application for Todolist Web application built with Laravel and Vue.js
https://github.com/guillaumebriday/todolist-frontend-vuejs
axios docker docker-compose hmr laravel-echo lazy-loading momentjs netlify spa tailwindcss vue-router vuejs vuex webpack webpack-dev-server
Last synced: about 11 hours ago
JSON representation
Front-end application for Todolist Web application built with Laravel and Vue.js
- Host: GitHub
- URL: https://github.com/guillaumebriday/todolist-frontend-vuejs
- Owner: guillaumebriday
- License: mit
- Created: 2017-12-20T23:46:44.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2021-01-24T22:21:55.000Z (almost 4 years ago)
- Last Synced: 2024-12-05T13:09:46.684Z (18 days ago)
- Topics: axios, docker, docker-compose, hmr, laravel-echo, lazy-loading, momentjs, netlify, spa, tailwindcss, vue-router, vuejs, vuex, webpack, webpack-dev-server
- Language: JavaScript
- Homepage: https://todolist.guillaumebriday.fr
- Size: 2.1 MB
- Stars: 145
- Watchers: 5
- Forks: 25
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Todolist-frontend Application
[![Donate](https://img.shields.io/badge/Donate-PayPal-green.svg)](https://www.paypal.me/guillaumebriday)
![](https://github.com/guillaumebriday/todolist-frontend-vuejs/workflows/Lint/badge.svg)
[![Netlify Status](https://api.netlify.com/api/v1/badges/68286221-cb5f-4960-834f-0ae250395090/deploy-status)](https://app.netlify.com/sites/todolist-frontend-vuejs/deploys)> Frontend for https://github.com/guillaumebriday/todolist-backend-laravel app, built for a serie of articles on my [blog](https://guillaumebriday.fr/).
> If you want to see this project with [Nuxt.js](https://nuxtjs.org/) I created the same application available here: [todolist-frontend-nuxt](https://github.com/guillaumebriday/todolist-frontend-nuxt).
The purpose of this repository is to consume API, provide by [a Laravel Application](https://github.com/guillaumebriday/todolist-backend-laravel), with the [Vue.js](https://vuejs.org) JavaScript front-end framework.
![Screenshot](https://raw.githubusercontent.com/guillaumebriday/todolist-frontend-vuejs/master/screenshot.png)
## Some of the tools used in this project
- [Vue.js](https://vuejs.org)
- [vue-router with Lazy Loading Routes](https://router.vuejs.org/en/)
- [vue-test-utils](https://github.com/vuejs/vue-test-utils)
- [vuex](https://github.com/vuejs/vuex)
- [axios](https://github.com/axios/axios)
- [moment.js](https://github.com/moment/moment/)
- [Laravel Echo](https://github.com/laravel/echo)
- [Webpack](https://webpack.js.org/)
- [webpack-dev-server](https://github.com/webpack/webpack-dev-server)
- [Tailwind CSS](https://github.com/tailwindcss/tailwindcss)## Installation
Development environment requirements :
- [Docker](https://www.docker.com)
- [Docker Compose](https://docs.docker.com/compose/install/)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 :
```bash
$ 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 :
```bash
$ docker-compose run --rm node yarn lint
```Running tests :
```bash
$ 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/](https://pusher.com/).
## Deploy in production
This application is hosted on [Netlify](https://www.netlify.com/) and available on [https://todolist.guillaumebriday.me/](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](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](http://opensource.org/licenses/MIT) license.