Complete Vue Developer Bootcamp (Pinia, Vitest)

Load Vue via a CDN, create a new app, and mount it to the element with id app; verify it works by opening the browser console.

Install and use the Vue devtools extension to debug a Vue app, verify detection via the Vue panel, and review root components and mounting.

Define and render data in a Vue app by adding a data function, exposing first name John, and using template expressions to display it.

Learn how a single Vue instance mounts to one root element and why multiple elements require separate instances, with a practical exercise to manage two widgets using unique IDs.

Store the app in a variable called VMM and update the first name to Bob after 2 seconds, using proxy getters and setters to access data directly from the instance.

Move name concatenation into Vue methods by creating a fullName function, using this in a regular function, and calling methods from templates to keep view logic clean.

Discover how directives in Vue alter element behavior by using built-in directives, creating custom ones, and using the v-cloak directive to hide expressions until the app loads, improving user experience.

Learn how two-way data binding with Vue's v-model links input fields to the data object, enabling real-time updates and automatic reactivity between the document and JavaScript.

Bind dynamic HTML attributes using the v-bind directive to set attributes from data properties, such as a link URL, and use the colon shorthand for concise binding.

Learn how to output raw HTML in Vue using the v-html directive, and understand cross site scripting risks when data from external sources contains HTML.

Learn to listen for browser events in Vue with v-on and its shorthand, manage age with increment/decrement buttons, and update inputs using v-model or explicit value and event handlers.

Learn to pass data with events in Vue by sending a message to the console, handling the event object as a second argument, and preventing default behavior.

Learn how Vue event modifiers simplify handling input events by using the .prevent modifier, removing boilerplate prevent default calls and keeping methods focused on data logic.

Learn to handle keyboard events in Vue by listening for the enter key with modifiers, updating data, using aliases or codes, and applying modifiers to non-keyboard events like click.

Explore Vue v-model modifiers—number, lazy, and trim—binding age input, handling type conversion, and controlling update timing for numeric fields.

Explore computed properties in Vue, learn how to replace costly methods with cached values, understand data versus methods, and boost app performance through selective recalculation.

Discover how Vue watchers monitor data changes and run functions, including asynchronous tasks, by watching properties like age; compare watchers with computed properties and observe a setTimeout example.

Learn to bind classes in Vue using object and array syntax, toggle a purple class with a checkbox via v-model, and use a computed circle classes property for clean styling.

Bind the style attribute in Vue by binding a size object to width, height, and line-height with a numeric input using v-model, then apply multiple style objects via an array.

Explore conditional rendering with the v-if, v-else-if, and v-else directives to add or remove elements based on a condition, preserving structure with templates and data-driven toggles.

discover how v-show toggles visibility with display none, keeping the element in the document; compare it to v-if for performance and note it doesn't work with template tag or v-else.

Learn to render lists in Vue using v-for to loop through arrays and objects, display values and indices, and use the key attribute to track items for dynamic data.

Understand how the key attribute ensures Vue updates move the correct elements with their data, using a unique key to prevent patching issues and boost performance.

Design and implement a perspective playground in Vue by binding sliders to a box's perspective and rotate properties, updating in real time with reset and copy-to-clipboard capabilities.

Copy data to the clipboard by a copy method using navigator.clipboard.writeText with async/await, and provide user feedback via an alert while testing in the browser.

Explore mounting a Vue instance to page, render the message via interpolation in a div with the id app, and control timing with a delayed mount using the mount method.

Explore the Vue view life cycle from creation to destruction, including before create, created, before mount, mount, before update, updated, and unmount hooks, compiling templates and reactivity.

Explore Vue lifecycle hooks from before create to unmount, using console logs to illustrate data access, template rendering, and the distinctions between created and mounted.

Explore how the virtual dom in Vue compiles templates into objects and uses patching to update only the necessary parts of the dom, boosting performance for large applications.

Explore how Vue implements reactivity with proxies, observing data changes and using a set trap to update the document, and learn how proxies power a reactive JavaScript framework.

Compare template placement in Vue, inside the document or in the Vue instance, against compiler versus runtime builds, and learn to create render functions with h for performance.

Explore how Vue components split templates into reusable, data-driven pieces with their own data, methods, and the template and data properties.

Explore Vue development tools that optimize bundles, code splitting, and asset management for scalable apps, beyond script tag loading, with Vite, Webpack, PostCSS, Sass, and ESLint.

Explore Vite, a fast module bundler that compacts multi-file projects into few optimized files and speeds development, highlighting its role in modern front-end development.

Explore how Vite handles project scaffolding, entry points, and CSS imports, and learn to run development, build, and preview commands to generate production bundles.

Explore SAS, a powerful language that extends CSIS, with features like functions, nesting, color manipulation using darken, and the ampersand selector, compiled into CSIS for use in Vite.

Explore PostCSS, a JavaScript library that transforms CSS after writing it, contrasting it with Sass. Configure via postcss.config.js and use autoprefixer to automate vendor prefixes in Vue projects.

Install ESLint and a Vite plugin to lint your Vue project, configure Vite with a config file, and run the dev server to enforce code quality during development.

Configure eslint with a separate .eslintrc file, enforce double quotes, set browser environment, and specify es2022 in parser options with source type module, using the vscode eslint extension to auto-fix.

Provide a quick overview of webpack as a more hands-on module bundler compared to Vite, covering entry points, output, loaders for JavaScript and CSS, Babel, plugins, and watching for changes.

Master the basics of core Vue tools and concepts to tackle complex view projects confidently, then transition to Vite for the rest of the course.

Scaffold a Vue project quickly using the Create View package, an official tool that configures Vite and essential tools, offering a basic setup or a custom configuration to start development.

Discover how a local server hosts your Vue app via localhost and a port, and how the development server auto refreshes the browser on file changes.

Review the project structure from root files to the source directory, learn how vite and vue process single-file components, and understand imports, aliases, and render-function output.

learn to create a Vue single-file component from scratch, remove unnecessary files and styles, and wire a dynamic hello world message with a name for debugging.

Create and load a child greeting component, organize components in a separate directory, and register it locally or globally in Vue, with a focus on local registration practice.

Apply styles to a Vue single-file component using a scoped style block to isolate CSS. Understand how scoped styles prevent leakage and resemble the shadow dom behavior.

Learn how to use sass in vue components by enabling the sass preprocessor, adding a language attribute in the style block, and applying hover styles that compile to CSS.

Learn how to move data from the root app component to child components using props, enabling parent–child communication and age-based greeting logic across components.

Learn how to use props as custom attributes to pass age from the app to the user component, render it, and bind with colon so parent changes propagate to child.

Explore the limitations of props in Vue by passing age data to a child greeting component, using conditional directives, and understanding why child mutations aren’t reflected in the parent.

Learn how to emit custom events to update props from a child component, using this.$emit and v-on, with age change and payload data flowing to the parent.

Validate component props in Vue by defining a props object with type checks, required, default values, and custom validators; test changes to catch errors in the console.

Learn how to update parent data from a child using callback functions in Vue, compare them with events, and understand why events are recommended for consistency and debugging.

Learn to use slots to pass down content from a parent component to a child in Vue, enabling reusable forms and components without using props.

Explore how named slots in Vue create a skeleton form component by distributing content to help, fields, and button sections with v-slot. Use default and named slots for flexible content.

Toggle between dynamic components in Vue using a dropdown, load via the is attribute, and keep component state with keep alive, while leveraging activated and deactivated lifecycle hooks.

Learn to add css transitions with Vue using the transition component and a toggle button. Implement fade effects for entering and leaving elements using enter and leave classes.

Configure Vue transitions using the transition component and set duration in milliseconds for precise animation timing. Use v-if and v-show with unique keys to manage enter and leave animations.

Explore how to implement CSS transitions and animations in Vue, creating zoom and fade effects with keyframes, toggle controls, and appear options for dynamic element entrances and exits.

Animate elements with JavaScript in Vue using the transition component and enter/leave hooks—before enter, enter, after enter, before leave, leave, and after leave—and implement handlers with a completion callback.

Master a zoom animation for enter and leave with the Web Animations API, using two keyframes scaling from small to full size, one-second duration, plus a JavaScript fallback.

Learn to combine css transitions and JavaScript hooks in Vue, using both css classes and hooks for enter and leave animations, with duration controls and reusable fade transitions.

Learn how to animate a dynamic list in Vue using a transition group component, with v-for driven items, random insertion, item removal, and fade animations.

learn to fix list animation by applying a move class with transform and transition, and use absolute positioning for fade-out items to achieve smooth, snapping-free item movement.

Load animate.css via a CDN in your Vue app, override transition class names on the transition group, and apply flip in x and flip out x animations with controlled duration.

Set up a Vue quiz application using starter files, build with components and animations, style with css from the zip, and implement a progress bar and static assets handling.

Split a Vue quiz app into questions and results components, pass data via props, and render with v-for and conditional logic to display one question at a time.

Build a Vue quiz flow that displays the current question using index and v-show, tracks answers and correctness, emits a question answered event, and updates a dynamic progress bar.

Pass the results and total correct to the result component, loop through results to find a match with a computed property, and render the appropriate outcome.

Overcome imposter syndrome by embracing steady practice, repetition, and hard work, and reinforce learning by teaching others on Discord.

Advance from fundamentals to building a music app with user registration and song uploads, while setting up the project, installing tailwind, and exploring state management in Vue.

Create a new music project with the Create View package, disable TypeScript support, enable Vue Router, state management, testing, lint, and prettier, install dependencies, and start the dev server.

Review the newly created Vue project structure, focusing on root eslint and prettier configurations, Cypress setup, and the source directory with folders for views, stores, router, plus a tests directory.

Configure VS Code to format on save with Prettier and ESLint, install the Prettier and ESLint extensions, and enable source.fix to auto fix lint issues on save.

Import the static HTML template from the provided zip into the Vue app. Use Tailwind and a custom CSS file to map the home, header, and authentication modal sections.

Discover Tailwind, a utility-first CSS framework that speeds development with single-purpose classes, contrasts with Bootstrap, and uses PurgeCSS to trim unused CSS; next, we'll install Tailwind for the music app.

Install Tailwind with npm, generate its configuration, and configure PostCSS for a Vite project. Load Tailwind's base, components, and utilities into CSS and import it in the main file.

Practice applying Tailwind classes to design a site, changing background color to bg-gray-100 and font family to Roboto, while exploring padding bottom pb-24 and Tailwind configuration tweaks.

Load images and fonts from the template by importing the main CSS and assets. Alternatively place fonts and asset files in the public directory for copying into the bundle.

Explore how state defines app data, from local to global, and learn to manage user systems with a central store using Pernilla (Pinia) for Vue apps.

Explore configuring Pinia in a Vue project by installing, registering plugins, and using defineStore to manage reactive state across components, with devtools integration and organized stores.

Split the template into modular components, create and locally register the app header and auth modal, and scaffold the modal toggle logic to manage authentication in the app.

Disable vue lint rules by editing the s lint rc dot CJS file and setting the rule to off, then rename components like app off to auth and update imports.

Create a centralized modal state with an is open value, then merge the store into the header and implement a toggle to control the modal across components.

Explore alternative mapping functions to connect store state to components with map state and map writable state, mapping only needed properties and distinguishing read-only from update mutations.

Access store state with getters, offering caching and cross-component reuse, instead of duplicating computed properties. Prepare your app to use getters in the next lecture.

Define a getter for is open that returns the hidden class when true, expose it through the modal store, and map it as a computed property to toggle modal visibility.

Close the modal by setting isOpen to false via a mapped writable state. Open and close the modal to test different state interaction methods.

Use aliases to rename a store's state property within a component, avoiding store changes; map writable state with an alias, renaming is open to modal visibility, and toggle the modal.

Implement tabs in a modal to switch between login and registration forms, using component data for the active tab, click events with prevent, and conditional classes to reflect active view.

Set up client-side form validation in a Vue project using a third-party library (v validate) to provide immediate feedback, reduce server requests, and complement server-side validation.

Register a validation library globally with a custom plugin to reuse validation across forms. Create an includes/validation.js plugin to register the form and field components globally and keep configuration light.

Explore validating input fields in the registration form using the v-form and v-field components, replacing the form element, and assigning a name, rules, and error feedback.

Define input validation rules as functions with the V validate library, install and import built-in rules, and register them globally to enforce required inputs across forms.

Apply form validation by outsourcing rules to a validation schema, bind rules to inputs, register an error message component, and display real-time feedback when fields are invalid.

Add and configure name field validation rules using object and string syntax, including minimum, maximum, and alpha spaces, via the validation schema and define rules with fast exit.

Learn to validate the email field in a Vue authentication form by configuring the field component, registering the built-in email rule, and displaying the error message.

Validate the age field in the authentication component with numeric rules, enforcing a minimum value of 18 and a maximum value of 100, and display error messages for invalid input.

Validate password and confirm password with a confirms rule to ensure they match, while setting required, min, and max for the password and displaying errors in the form.

Validate a country dropdown and a terms of service checkbox using a shared validation approach, including a custom excluded rule to block Antarctica and consistent error handling.

Validate the entire form on submit and force validation for untouched inputs. The library handles the submit event, prevents refresh, and only calls register when all fields are valid.

Explain how slot properties pass data from a child component to a slot in the parent scope, using default slots and v-slot aliases.

Learn how to render multiple validation errors for a form input by overriding the fast exit strategy with the bails=false setting, using the field component slot to display each error.

Define a user data object with a country field set to USA and bind it via the form's initial values prop to apply defaults to the country dropdown.

Configure custom error messages for global validation rules in a Vue app, override messages via the validate library's configure function, and create per-field messages like country excluded and passwords mismatch.

Learn how to configure validation triggers for inputs—on blur, on change, on input, and on model update—using the configure function to manage default behaviors.

Render a tailwind alert during form submission to show processing status for user registration. Disable the submit button while submitting and display success messages like 'Your account has been created'.

Validate a two-field login form (email and password) using a validation schema, show errors, and provide real-time alerts. The lecture refactors into dedicated login and register form components.