Vue Templates Logo Vue Templates
Vuetify Todo Pwa screenshot

Vuetify Todo Pwa

Author Avatar Theme by Davidgaroro
Updated: 5 Nov 2021
196 Stars

A simple Todo PWA built with Vue 2 + Vuex + Vuetify.

Github Live Preview

Categories

Vuetify

Overview:

The vuetify-todo-pwa project is a simple Todo PWA (Progressive Web App) created with Vue.js, Vuex, and Vuetify. It is a great learning resource for those looking to understand these technologies.

Features:

  • Vue CLI 3 + Webpack: Uses Vue CLI 3 and Webpack for single file Vue components.
  • Hot-reload in development: Allows for automatic reloading during development.
  • Lint-on-save with ESLint: Includes ESLint (Standard) for linting code.
  • Stylus CSS preprocessor: Utilizes Stylus as the CSS preprocessor.
  • Vue + vue-router + vuex working together: Integration of Vue, vue-router, and vuex.
  • Vuetify a-la-carte: Reduces project size by selectively importing Vuetify components.
  • Progressive Web App features: Includes app manifest, service worker, and Workbox options for caching Google Fonts.
  • 100/100 Lighthouse score: Achieves a perfect Lighthouse score for performance and accessibility.

Installation:

To install the vuetify-todo-pwa theme, follow these steps:

  1. Clone the repository.
    git clone [repository_url]
  2. Install dependencies.
    npm install
  3. Compile and hot-reload for development.
    npm run serve
  4. Compile and minify for production.
    npm run build
  5. Lint and fix files.
    npm run lint

Summary:

The vuetify-todo-pwa project offers a simple Todo PWA built with Vue.js, Vuex, and Vuetify. It provides essential features like hot-reloading, ESLint for code quality, and a perfect Lighthouse score for performance. The installation process is straightforward, making it a great resource for learning about these technologies.