Vuetify 2: Create an App with Vue JS 2 & Vuex - in 5 Hours!

Install node.js and the Vue CLI to start a new Vue project, then run npm install -g @vue/cli in the terminal and create your first Vue project.

Create a new Vue project and add Vuetify by selecting features, enabling router and UX, and configuring history mode with Sass. Then run npm run serve to preview the app.

Navigate the public and source folders, manage assets like favicon.ico and index.html, and mount App.vue while organizing views, components, router, and store for a Vue + Vuetify app.

Install Vue devtools in Chrome to inspect components, view data properties, and debug events, enabling live updates and deeper understanding of a Vue.js app.

Understand the basics of Vue.js with two quick-start videos, then apply hands-on coding in a Vue project, adapting components, child components, and import paths as you go.

Delete the Hello World view component and the task view, and rename the Hello World copy view to Hello worldview.

Design a starter app layout by adding a navigation drawer, header, and pages with routes, using the base wireframe and source code to paste into app.vue.

Set up a navigation drawer in Vuetify by binding to a data property with v-model and using the app prop, then define items and routes for todo and about pages.

Configure pages and routes with vue-router in a Vuetify app, link home and about paths, and wire the navigation drawer v-list-items to the router.

Get your Vue.js app pages ready by creating an about page and preparing the to-do page, applying padding utilities and updating routes from home to to-do.

Improve the header by updating the app bar with the app prop, remove shrink on scroll, and set prominent height and primary color for a tall blue header.

Replace the app bar image with a permanent mountains.jpeg from pixabay, save it to the public folder, and wire the nav icon to toggle the drawer on all devices.

Create a to-do page by implementing a one-line task list with checkboxes using a Vuetify list component, trim extra headers and padding, and render tasks from a data property.

Define a data property returning a tasks array with id and title, render each task with v-for using a unique key, and insert a v-divider between items.

Add a done property to each task and bind it to a v-checkbox to mark tasks as done. Toggle property by task ID, and apply conditional styling for done tasks.

Implement a delete task action in a Vuetify list using a right-aligned delete icon button, a click handler, and array filtering to remove the task by its ID.

Add tasks by typing in a text field and clicking plus icon; bind task title with v-model, create a task with id, title, and done, and push to tasks array.

Display a no tasks message with v-if on the v-list and v-else. Add a large primary check icon, centered, with text-h5 and primary-text, 50% opacity.

Move all app data and data-changing methods into a centralized Vuex store to simplify management across components, using state, mutations, actions, getters, and optional modules.

Move the tasks array into the Vuex store state and connect the list view to store data, accessing tasks via $store.state.tasks and rendering with v-list and v-if.

Move addTask into the Vuex store by converting it to a mutation, pass new task title as payload, commit the mutation, update state tasks, and clear the input field.

Move the doneTask method into the Vuex store as a new mutation, then commit it from the to do view to set the task's done to true.

Move the delete task logic into the Vuex store as a mutation and commit it from the Todo view with the task id, updating state.tasks and removing the task.

Break the to do page into child components, including an add task field, a task list, and per-task components, to simplify management and enable component reuse.

Move task field into a child component, create field add task view, wire it into todo view using conventional imports or require, and relocate data and methods to the child.

Move the task list to a child component, use v-if to toggle between tasks and the no-tasks widget, and import and render the list-tasks view on the to-do page.

Create a child task view to render a single task, and pass the task object as a prop from list tasks view while removing v-for loop and key from child.

Create a no tasks child component for the todo page by extracting the div, importing the view, and tidying styles, while setting up vuex for future widgets like snack bars.

Learn to implement a global snackbar component in a Vue app, wiring it to the Vuex store to display notifications when tasks are added, updated, or deleted.

learn to display a task added snackbar in vuex by using an add task action that commits the task mutation and dispatches the snack bar when a task is added.

Display a snackbar on task deletion by dispatching a delete task action that commits the delete task mutation and shows the snackbar, with dynamic snackbar text.

Move snackbar text into Vuex store, update template to read from store, and update mutation and actions to show dynamic messages like 'task added' or 'task deleted'.

Manage snackbars in a Vuetify Vue 2 app by hiding an active snackbar before showing a new one and delaying with a 300 ms timeout to ensure clean, sequential messages.

Implement a dismissible snackbar by adding a hide snackbar mutation and committing it on the close button, updating the show state to false to create a reusable component.

Create a confirmation dialog before deleting a task, wire a reusable dialogue delete component as a child of the task view, and pass the task ID to perform deletion.

Customize a delete confirmation dialog in a Vuetify app by updating the title, message, and button colors, and control its visibility with a dialogues.delete flag.

Pass the task prop to the dialogue delete component, dispatch delete task with task.id on confirm, and close the dialog when the user confirms or declines.

Close the dialog on no click in a Vue 2 app by emitting a custom close event from the dialog delete component and resetting dialogue.delete in the parent task view.

Replace the delete button with a Vuetify task menu in a Vue.js 2 app with Vuex, enabling edit and due date features with a reusable task-menu component.

Bind a click handler to each menu item and pass its index to a handleClick method, then invoke the correct item’s click function to log edit, due date, or delete.

Learn how to implement a delete task feature in Vue.js 2 by moving the delete dialog into the task menu, wiring props, and handling click context to delete tasks.

Add an edit task dialog in a Vuetify Vuex app that loads and edits the current task title via a text field, reusing the delete dialog with visibility control.

Copy the task title into a local data property when the edit dialog opens and bind the field to this copy. Initialize it in mounted from task.title.

Update a task title by sending a payload with the task id and new title to a vuex mutation when saving, then commit and reflect changes.

Close the edit task dialog by emitting the close event after saving via the save task method, and trigger save on enter in the edit dialog text field.

Implement field validation to disable the save button when the task title is empty or unchanged, using a computed task title invalid and the disabled prop.

Enhance add task validation by using a slot-based icon with mdi plus, disable the add button when the title is empty, and use a computed property for task title invalid.

Dispatch an update task title action from the edit task dialog to commit the update task title mutation and show a snack bar with the message 'task updated' after saving.