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

Explore setting up a Vue 3 project using the CDN, create a simple HTML page, and implement one-way and two-way data binding with v-model and the createApp API.

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.

Master vue 3 events by building a card view model, incrementing a cart count on click, and updating image on hover with the @ shorthand and a change image method.

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.

Create a new vilify project with yarn, enabling Vue Router and Pinia. Skip TypeScript and ESLint, install dependencies, then run the dev server on localhost:3000.

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.

Style the Vue 3 app menu by refining the navigation drawer with Vuetify v-list and router links, using a simple items array and scoped CSS to remove underlines.

Finish up Vue UI tweaks: adjust the color palette, replace the directive with text content via bind, update the tag color to gray, and ensure navigation and to-do list alignment.

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.

Clean up the list task component and move the logic to the store, organizing state with the tasks store. Prepare to use local storage in the next video.

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.

Retrieve tasks from local storage with get item for the key tasks, parse JSON, and display them in the to-do list. Mount the view to auto-load and persist tasks.

Enhance the Vue.js 3 app styling by adding a background image behind the avatar and username with a gradient, and adjust the image height.

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.

Turn your Vue app into a PWA by adding vit plugin PWA, configuring the manifest and icons, building, and deploying on Netlify for installable, responsive performance.

Join Yuri to build a Pokedex with Vue 3, exploring project structure, components, lifecycles, option vs composition APIs, routing, bootstrap styling, reactivity, and Netlify deployment.

Follow the official documentation to scaffold a Vue 3 project with node and npm, choose the regular view template, install dependencies, and explore composition API functionality.

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 versus the options API in Vue, comparing code structure, data and computed logic, and how separation of concerns improves maintainability.

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.

Explore bootstrap grids by building containers, rows, and columns to position items like the pokedex card and list. Learn responsive margins and spacing with bootstrap classes to create clean layouts.

Fetch pokemon data from the poke api using the base url /pokemon with limit, and display the results, while debugging reactive rendering with ref and mounted lifecycle.

Build your first Vue 3 component using the composition API, rendering a list of Pokemons with a child component via v-for, passing name as a prop and wiring imports.

Master CSS gradient tools to design gradient backgrounds for Pokemon cards, adjust transparency and colors, and implement scoped styles with hover interactions and a pointer cursor in a Vue project.

Create a dynamic search field that filters the Pokemon list as you type, no search button. Use a computed property and lowercase matching for case-insensitive results, keeping accessibility in mind.

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.

Configure your app as a progressive web app by installing the pwa plugin, updating the v8 config, and adding a web manifest and favicon for iOS and Android.

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.