vuetify-todo-pwa

This project is a simple Todo PWA inspired by TodoMVC. Perfect to learn the basics about Vue.js, Vuex and Vuetify technologies.

Live Demo

Features

• Vue CLI 3 + Webpack + vue-loader for single file Vue components
  • Hot-reload in development
  • Lint-on-save with ESLint (Standard)
  • Stylus CSS preprocessor
• Vue + vue-router + vuex working together
• Vuetify a-la-carte (reduce project's size in production)
• Progressive Web App
  • App manifest
  • Service worker
  • Workbox options - Cache Google Fonts
  • 100/100 Lighthouse score

Built With

Dependencies

| Name| Description | | |--|--|:--:| |vue|Progressive JavaScript Framework|🖖 |vue-cli-3|️Standard Tooling for Vue.js Development|🛠️ |vue-router|Official Router for Vue.js|🚦 |vuex|️Centralized State Management for Vue.js|🗃️ |vuetify|️Material Component Framework for Vue.js|📚

Development Dependencies

| Name| Description | | |--|--|:--:| |stylus-loader|CSS preprocessor for webpack|🎨 |vue/cli-plugin-babel|Compiler for next generation JavaScript|🐠 |vue/cli-plugin-eslint|Pluggable JavaScript linter|✍️ |vue/cli-plugin-pwa|JavaScript Library for adding support to PWA|📱

Installation & Setup

Clone repository

git clone https://github.com/davidgaroro/vuetify-todo-pwa.git
cd vuetify-todo-pwa

Install dependencies

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Donation

License

MIT © davidgaroro