Vue 3: Create a Mobile & Desktop App (with Quasar 2 & Pinia)

Reduce the drawer width by applying a width prop of 250px and set a 767px breakpoint so the drawer remains on tablets in portrait mode and hides on smaller screens.

Create an entries list using Quasar list items to display the entry name left and the amount right, with a bordered, separator-rich layout powered by Vue 3, ref, and v-for.

Implement a currency formatter in a Vue 3 app using toLocaleString with en-US to display plus/minus signs, two decimals, and a currency symbol for income and expenses.

Convert the currency formatting into a reusable composable named use currency in the use folder, then import and export it to apply formatting across the app.

Improve entry text by applying bold typography with Quasar's text weight bold and color logic for positive, negative, and zero amounts; use gray-6 and update colors to #7EB004 and #D73F01.

Add a balance bar in the footer using a grid, displaying the balance label on the left and the amount on the right, with Quasar styling and an upward shadow.

Create an add entry form bound to a reactive object, import reactive from Vue, and use v-model for name and amount to update the entries list.

Implement a submit handler for a Quasar form, create a new entry with a unique uuid, name, and amount from a reactive form, and push it to the entries array.

Fix the balance error by using v-model.number for the amount input in a Vue 3 and Quasar 2 app, ensuring the balance updates after eBay sale.

Tidy and reset the add entry form after submission by using a default object and Object.assign with the spread operator to reinitialize the reactive form.

In this Vue 3 and Quasar 2 app, refocusing the name field after adding an entry enables rapid, consecutive data entry.

Learn to implement swipe to delete on mobile using Quasar's q-slide-item, configuring left and right slots, colors, and a delete icon to remove entries with a left swipe.

Show how to prompt before deleting an entry on swipe left in a Vue 3 app with Quasar 2, using a confirm dialog and reset on cancel.

Swipe to delete an entry, capture its id, locate its index with findIndex, and remove it from the entries array using splice, in Vue 3 and Quasar.

Enable html in the delete dialog to show swiped entry’s name and amount with currency formatting, using a template string and the entry object, and color amounts green or red.

Implement a deleted-entry notification using the Quasar Notify plugin, configure it in quasar config, import the use quasar composable, and call cue.notify with a top-positioned message entry deleted.

Explore how Pinia centralizes data and methods in a shared store, enabling nested components to access and update state without passing data through props, improving maintainability in Vue 3 apps.

Explore option stores and setup stores in Vue 3 Pinia, detailing state, getters, and actions, and how setup stores use refs, reactive objects, computed properties, and watches.

Create a Pinia setup store for entries by renaming and organizing state, getters, and actions, moving data from the entries page, and preparing an empty return object for incremental setup.

Move the entries array into a Pinia store as state, expose balance as a getter, and implement add and delete as actions, then access the store across components.

Move the balance computed property from the page view into a pinia getter in store entries.js, update imports and references, and verify the balance bar updates when entries change.

Add entry Pinia action to push new entries into the store, generating a uid, using form submit to trigger the action, and observe updates in Vue devtools.

Create and wire a delete entry action in a Pinia store, trigger it from the page entries view, and use Quasar notify outside of view components.

Tidies the entries page by removing unused arrays, computed properties, and methods, moving logic into Pinia store with state getters and actions, and ensuring the add entry resets the form.

Create a balance widget as a child component under an entries folder, import it in the page entries view, and connect it to the store to reflect balance updates.

Move the add entry form into a child component, create the add entry view, wire reactive form data to the entry store, and integrate the component into the entries page.

Develop a child entry component in Vue 3, pass a required entry prop from the page entries view to the entry view, and render name and amount.

Create a nothing here component to show when there are no entries yet, render it with v-if not store.entries.length, and center the icon and text as a friendly fallback.

Implement in-place editing with the quasar q-popup-edit component to modify entry names and amounts, wiring the UI to the entries store and refining positioning with anchor, offset, and cover props.

Discover how to customize QPopupEdit in Vue 3 with Quasar 2 by using a global letter-spacing-none CSS class, adding ok/cancel buttons, and styling button labels to titlecase within the popup.

Implement a cube pop up edit for the amount field in a Vue 3 Quasar app, make it numeric with right alignment and a 0.01 stepper.

Update entry data in a Vue 3 app with Quasar 2 and Pinia by emitting save events and updating name and amount through a store action.

Toggle paid status with a left swipe by updating the Pinia store entry’s paid flag. Style paid items and display the total balance at the bottom using Quasar 2 components.

Bind the paid property to conditional classes to color paid entries gray and strike the name and amount; use a class array for conditions, with swipe to toggle paid state.

Add a paid balance row under the main balance, style the caption as gray and small, and display the paid amount with positive/negative coloring using the amount composable.

Create a paid balance getter in the Vue 3 app using reduce to sum amounts of paid entries, bind it to the UI, and only display it when non-zero.