Complete course Vue JS 3, Vuetify, Pinia, Vue Router & more

Render product details and color variants using Vue's v-for to generate list items, then optimize with a key binding to prevent bugs and improve performance.

Explore conditional style rendering in Vue by binding classes and style attributes to color circles, hover colors, and a stock-based disabled button, with camelCase vs kebab-case in CSS.

Explore computed properties in Vue.js to combine product title and brand into a single display and derive an in stock status for cleaner templates.

Demonstrate prop flow in Vue by creating a cart component that receives a cart prop from a parent, binds it, and emits signals to update the cart display.

Review the first session by building a CDN-based Vue app with index.html and a main file, organizing assets, styles, images, and components, and previewing the Vue CLI and Vite workflow.

Explore updated folder architecture by using the pages folder to replace the old views folder, enabling auto generated routes via the Views.py plugin, with examples like /home.

Create a page layout with a side menu using the baseline layout, copy the GitHub template into your project, adjust the outer view, and set up home and about routes.

Set up Vue router (legacy) in a Vue 3 app, create home and about routes, and wire router links in the navigation drawer.

Learn to create and navigate routes in Vue using Vue Router and router-view, with links between home and about pages and the legacy method labeled.

Create a button at the end of the task list that opens an edit and delete menu using v-menu and icons, then split into components and pass tasks with defineProps.

Edit a task in a vue js 3 app using a vuetify modal with title and description fields, pass the task by index, validate input, and save changes.

Explore Pinia as a lightweight Vue state manager that eliminates excessive prop passing by using a dedicated store. Define stores, manage state and actions, and persist tasks to local storage.

Learn how to save and persist tasks in the browser using localStorage with setItem and JSON.stringify, using a single tasks key and saving after add, delete, and edit operations.

Create color-coded alert notifications in a Vue 3 app using a Pinia store to show a task creation message, with a close button and auto-disappear after 1 second.

Persist a task's completion status by toggling done and saving to local data. A click on a task index toggles done and persists state after reloads.

Parameterize the alert component to make it generic and centralize notifications in the alert store, adding types such as success, error, warning, and info for created, deleted, and updated tasks.

Deploy a Vue.js app to Netlify with continuous deployment, including preparing the about page, adjusting project files, building with yarn, and verifying the dist output.

Explore the bit project's folder structure, including src, public, node_modules, and key configuration files. Boot app via main.js and app.vue, compare options API and composition API while noting fast reactivity.

Explore the composition API with ref, reactive, computed, and mounting hooks like onMounted and unmounted, demonstrating two-way data binding with v-model and practical pitfalls.

Create an interactive Pokemon card in a Vue app by clicking a Pokemon to reveal its name, height, base experience, and image from the Pokemon API.

Tweak project images by adding assets and svg icons, apply conditional image display, adjust card heights, deploy a CSS gradient, and refine home and about pages with bootstrap.

Deploy your app to Netlify by pushing to GitHub, importing the project, and building with npm run build to generate a dist folder, then customize the Netlify site URL.

Refine the project's responsiveness with CSS and Bootstrap, adjusting the Pokemon card layout, image sizes, and margins for mobile, tablet, and desktop via breakpoints and grid changes.