Build Web Apps with Vue JS 3 & Firebase

Discover using Vue via the cdn to drop a standalone widget into an html page, link the Vue.js library, and verify with a script and a local dev server.

Create a Vue app with createApp, mount it to a dom element, and define a root component with a template and data to render dynamic content and handle events.

React to click events in Vue using the v-on directive (and the @ shorthand) to run code that updates age and title properties, and define component methods to update them.

Explore conditional rendering in Vue.js with v-if, v-else, and v-show, and learn to toggle content using a data property and click events, including DOM vs CSS implications.

Bind and handle mouse events: mouse over, mouse leave, double-click, and mouse move on four boxes, inspect the event object, use $event, and update the user interface with cursor position.

Learn to apply dynamic classes in Vue 3 by binding a class object to each book based on the is_fave property, highlighting favorites with a fave class using flexbox.

Accept the challenge to toggle each book’s is fave property by clicking its a tag, attaching a click event, and switching the book’s dynamic class from pink to white.

Attach a click event to each book tag to toggle a book's is_favorites flag with a dedicated toggle function. Pass the book into the method and update the boolean.

Learn how computed properties in Vue JS 3 derive data from component state to produce a filtered books list of favorites, updating the template automatically as data changes.

Learn how to build full Vue.js websites using the Vue CLI, scaffolding apps with components, routes, and live reload, then optimize for production and multi-page navigation.

Learn to set up and use the Vue CLI by installing Node and npm, installing the Vue CLI globally, creating a Vue project, and opening it in VS Code.

Take a practical walkthrough of a Vue 3 project, from the node_modules and public folders to source components and the root component, then run a local dev server.

Explore Vue single-file components, including template, script, and style sections, and how the root component mounts to the DOM and injects templates into the page.

Explore template refs in Vue to store a DOM element reference in a variable, access them via this.$refs, and perform standard DOM manipulations like adding classes and focusing inputs.

Split your Vue app into view components to improve readability and reuse, with a root App View hosting header, article, and footer components forming a component tree, including a modal.

Learn how to scope component styles in Vue with scoped attributes, override global styles, and implement a global stylesheet to manage common elements across the app.

Pass data from a parent to a child in Vue 3 using props to make components reusable and maintain single source of truth, demonstrated with header, text, and theme props.

Demonstrate toggling a modal in Vue 3 with a show modal flag controlled by v-if, a toggle modal method, and a custom close event emitted to the parent.

Learn to use Vue click event modifiers to control when a click fires, supporting right clicks, alt or shift key presses, and self modifier to ignore clicks on the target.

Explore how slots in Vue 3 enable passing custom templates into components, including default and named slots, and differentiate slots from props through a modal example.

Explore reusing a modal component in Vue 3 by adding a second modal with a separate show modal two toggle, and using slots for customization.

Explore the Vue 3 teleport component to move a component's rendered output to a different dom location, preserving interactivity and styles while using class or id selectors.

Develop a Vue 3 game that toggles isPlaying, computes a random 2 to 7 second delay, passes it to a block component, and reveals the clickable block after the wait.

Learn how Vue component lifecycle hooks guide code execution from before create to destroyed, with mounted and updated used for data fetches, delays, and cleanup.

Learn to emit a custom event with data from a child to its parent in Vue, pass the reaction time, and display results in the app view.

implement the results component to display the final score after the game ends, using conditional rendering with v-if and passing a score prop to render the reaction time in milliseconds.

Add a reaction-time based ranking in the results component, assigning ninja fingers under 250 ms, rapid reflexes under 400 ms, and snail pace otherwise, updated on mount.

Create a new Vue project, build a signup form component with an email input, style it, and implement two-way data binding to capture and log user input.

Learn to bind a Vue select field with v-model to track user role selections (web designer or web developer), set an initial value, and style the select box like inputs.

Learn to use checkboxes in Vue with v-model, including a single boolean checkbox for terms and conditions and a group bound to an array of values, with output of selections.

Learn to handle keyboard events in Vue by adding skills to an array on comma using v-model and the key up event, with the alt modifier to hide the comma.

Attach a click event to each skill, so clicking a skill removes it from the skills array using filter, updating the skills property, with pill-styled inline blocks.

Learn to handle form submissions in Vue.js by attaching a submit handler, preventing default reload, validate password length, and log the form data to the console.

Discover how the Vue router enables client-side routing by swapping components inside the app based on the route, rendering pages such as home and about without extra server requests.

Explore how Vue router links intercept navigation, replace components instantly, and use the to attribute or route name binding to keep links future-proof.

Define a /jobs/:id route parameter, link each job to its details page, and access the id via the route object in the job details component to show the correct job.

Programmatic navigation with the view router uses the Web History API to go back and forward, and to redirect by pushing a named route such as home.

Learn about lazy loading components and code splitting in Vue routing to reduce the initial bundle size, loading a component only when its route is visited.

Learn to fetch external data in Vue apps using JSON server to simulate a local API, create a db.json resource, and interact with endpoints like /jobs and /blocks.

fetch data in a Vue 3 app using fetch and json server, populate a jobs array on mount, and fetch a single job in the details view with conditional rendering.

Learn how to conditionally render data in Vue 3 using v-if and v-else to avoid accessing null values, display a loading state, and render job details after fetch.

Learn to build a reusable single project component in Vue by importing and registering it, passing each project as a prop, and toggling a details section with v-if on click.

Use material icons in a Vue app to delete, edit, and complete projects. Load the icon web font, place icons in a project actions bar, and style with flex.

Attach a click to the trash icon to send a delete request to the JSON server, then sync local data by emitting a delete event and filtering the local array.

Toggle a project's complete flag with a patch request to the update endpoint, emit a complete event, and sync local data while applying a complete class and tick color.

Create an add project form in a Vue 3 view with title and details fields, using v-model, preventing default submit, and preparing a post request to add the project.

Create a new project object from the form, post it to the /projects endpoint with fetch, let JSON server assign an id, and redirect to the home page on success.

Create a navbar component in the components folder, import it into App.vue, and connect router-link to the home and add project routes. Style the nav and active link with CSS.

Create an edit project view and wire it to the app router, using a route parameter id to fetch and pre-populate the title and details fields for the selected project. Update the edit form with two-way data binding, a router link to edit route, and a fetch-based render using the mounted hook.

Update a project by submitting a form that sends a patch request with a JSON body to modify title and details, then redirects home and handles errors.

Create a Vue 3 filter nav to switch projects by all, completed, or ongoing, emitting a filter change and highlighting the active state with a prop-driven class.

Create a computed property named filtered projects that returns projects matching the current filter: all, completed, or ongoing, by evaluating project.complete and updating the output accordingly.

This lecture explains how the composition API in Vue 3 addresses drawbacks of the options API by grouping logic in setup and enabling composition functions, while noting its optional use.

Explore the composition API basics by building a setup function that runs before created and mounted, returns values to the template, and wires a click handler for interactivity.

Explore template refs in the composition API setup function, link refs to DOM elements, return and access them via p.value, and manipulate classList and textContent.

Discover how to make setup variables reactive with Vue refs, update them via buttons and input, and watch the template automatically reflect changes using v-model and ref values.

Learn to use refs and reactive in Vue to manage values, compare .value usage with refs to direct access in reactive, and understand primitive limitations.

Learn to use computed properties in the composition API setup function, creating refs and filters to produce dynamic, search-driven lists.

Explore the Vue 3 composition API using watch and watchEffect to run code on changes, including initial runs, and stop them by invoking the returned stop functions.

learn to use props inside the setup function with the Vue composition API, pass posts to a post list, and create a single post with a body snippet.

Learn to use Vue lifecycle hooks inside the setup function, importing on mounted and on updated. See how toggling posts triggers component mounted and updated.

Fetch data asynchronously inside the Vue 3 setup function using async/await and the fetch api to load posts from a db.json file via JSON server, with loading and error handling.

Build composition functions (composables) to fetch and expose data in Vue 3, returning posts, error, and load, then import and use them in components; render post tags with v-for.

Create a detailed post view with a dedicated details component and a route that accepts an id, then fetch the single post with a new composable.

Create a blog post form in a Vue 3 app: add a create view, route, and a title, content, and tags input with enter to build a unique tags list.

Practice submitting a form to post a new entry to /posts using async/await, building a post object with title, body, and tags, and sending JSON to the JSON server.

Learn to manage asynchronous data in Vue 3 using async/await in composable functions and setup, explore the experimental suspense for fallbacks, and apply final blog styles for a cleaner layout.