The Vue 3 Bootcamp - The Complete Developer Guide

Explore what Vue 3 offers by building a simple counter app, and compare it with vanilla JavaScript to see why Vue is valuable for larger scale applications.

Build a vanilla JS counter app by creating an HTML template in VS Code, using emit for boilerplate, and launching with Live Server on localhost:5500, with minus and plus buttons.

Style the app by creating a Styles.css and linking it in the head, set 100vw by 100vh with an alice blue background, and center content using flexbox.

Learn to make a counter app functional by selecting HTML elements, wiring click events, and updating the display with a count variable using vanilla JavaScript, then compare to Vue.

Learn to create a Vue app using the command line interface, generate boilerplate, initialize the project, install dependencies, and run the dev server on port 5174.

Rebuild the app in Vue by converting counter to a Vue app using App.vue, template, setup, and ref for count, with plus and minus buttons, and compare to vanilla JavaScript.

Discover why Vue.js simplifies web development versus vanilla JS, using a single app.vue file and inline event bindings, with easier routing and event handling.

Install the needed dependencies with npm install, pulling in vue and related packages from package.json. This creates node_modules and installs both dependencies and dev dependencies.

Understand how browsers request server data and render content, then spin up a development server with npm run dev to serve your Vue app locally.

Discover how npm run dev spins up a development server at localhost 5174, serves a minimal index.html, and loads a bundled main.js to render a client-side single-page Vue application.

Learn to build with Vue templates by wiring createApp, mounting to the app div, and using a Vue template to render HTML as JavaScript, including a counter user interface.

Style the app by adding style tags in the single-file component, use display flex to center content with align-items and justify-content, and apply scoped styles to avoid global effects.

Learn to access variables in Vue 3 by defining a count in the script tag and rendering it in HTML with curly braces, replacing old DOM manipulation methods.

Create add to count and subtract from count functions and wire them to button clicks with Vue's click listeners, invoking functions and verifying calls with console logs.

Define the counter as a piece of state with ref and update count.value using plus and minus actions, while Vue re-renders the HTML only when state changes.

Explore the composition API and options API in Vue, define state and handlers with setup, and learn why the composition API is the future of Vue development.

Create a notes app with a header, modal interactions, and addable notes shown as colored cards with timestamps, while exploring new Vue view concepts and planning HTML and CSS groundwork.

Build a Vue 3 notes app by scaffolding the HTML structure (container, header, cards grid, and modal overlay) and styling with scoped CSS and flexbox for layout.

Learn how to toggle a modal with v-if and v-show in Vue 3 by managing state with ref, handling click events, and comparing rendering approaches for SEO and performance.

Master two-way binding in Vue using v-model to synchronize a text area with a state variable, updating the UI and state together and enabling actions like clearing input.

Create a note by handling a click event, using two-way binding for the text area, and storing notes as an array of objects (text, date, id, background color) to render.

Render multiple note cards by iterating over a notes array with the v-for directive, binding each card's text, date (formatted), and background color to its object.

Learn how to use Vue's v-for to render arrays with a unique key, typically the item id, and understand how keyed elements improve update performance by preserving DOM elements.

Enforce a ten-character minimum for new notes, show a red error message, and trim whitespace with v-model to validate input before updating the notes array and modal.

Build a dynamic quiz app with Vue 3 and the composition API, featuring a searchable grid of quiz cards, route-driven quiz pages, interactive questions, and animated results.

Build the html and css for a Vue quiz page by setting up a view application, and composing a header, search input, and card options with a development server.

Render quiz cards by importing quizzes.json from a data directory, store them in a reactive ref, and use v-for to display each quiz’s image, name, and questions length, enabling search.

Learn to build a functional search with two-way binding using ref and v-model, trim input, and filter quizzes by name with a watch listener using lowercase includes checks.

separate app code into components to isolate logic and enable reuse, create a card component in components directory, import and render it, and prepare to pass data to components later.

Pass quiz data to a card component using props in Vue 3, define the props, and access quiz.name, quiz.questions.length, and quiz.image to render dynamic content.

Explore routing in a single-page Vue app by turning card clicks into page-like navigation, using routes to render different components such as home and about without new HTML files.

Build a blank Vue app to master routing fundamentals by setting up Vue Router, configuring routes, and running a development server, then translate the pattern to your quiz app.

Learn to create and render two view components: home view and about view, in Vue 3, organize them in the views directory, and conditionally render them based on the path.

Install vue-router and define routes to render the home view at / and the about view at /about using createRouter, createWebHistory, and router-view.

Learn to add a persistent navigation bar using Vue Router's router-link to navigate between home and about without refreshing the page, preserving state across routes.

Apply an active class to router links to highlight the current page in the navigation bar, using a scoped style, the active class, and font-weight 900 with gold color.

Explore dynamic routing in a Vue 3 app by turning car cards into links to /cars/:id, and render each car’s image, price, kilometers, and year from cars.json.

Learn to extract the id from the path using the route composable, convert it to a number, find the matching car in data, and render its name, year, and price.

Discover nested routes in Vue Router by rendering a contact view inside a car page at /cars/:id/contact, using child routes and router-view.

Programmatically navigate in Vue 3 with useRouter to push to /cars/{id}/contact, contrast with router link and useRoute for path info, and apply conditional routing via buttons.

Implement a 404 not found page in a vue 3 app by adding a catch-all route using regex and rendering a not found view with v-if.

Learn how to implement route redirects to simplify navigation, redirecting /home to / and /info to /about, avoiding extra routes while ensuring the correct view loads.

Implement Vue Router to power the quiz app, define routes for the quiz list and individual quizzes, wire router-view, and enable programmatic navigation to /quiz/:id.

Create a quiz page with HTML and CSS in a Vue 3 app, including a header with question status, a progress bar, and a multiple-choice options layout rendered with v-for.

Discover how to separate code into components by extracting the question and header into their own Vue components, then import and render them in the quiz view.

Learn to render quiz questions dynamically by extracting the quiz id from the path, locating the quiz in quizzes.json, and passing the current question and options as props.

Pass dynamic data via props to the quiz header, compute the progress from current index and length, and use watch to update state on index changes for reactive re-renders.

Learn how to replace a watch with a computed value to derive question status from the current index, simplifying code, avoiding extra fetches, and ensuring re-render when dependencies change.

Compute the quiz bar percentage from the current question index and total questions, convert to a percentage, and pass it as a prop to drive the header width.

Learn how a quiz uses props to pass data down, and how it emits events from child to parent to update current question index and score, then display results.

Learn to emit a select option event from a child component in Vue 3, pass the is correct value, and update quiz view’s current question index and correct answers count.

Learn to render a results component when the Vue 3 quiz completes using v-if and a results state, passing quiz length and correct answers, with a back to home route.

Explore built-in Vue animations to create smooth page transitions without external libraries, and set up a new TypeScript project named animation with Vue Router to practice.

Toggle a hello world text with a button using Vue 3 ref state and v-if, then animate its background color from yellow to blue with the transition component.

Learn to implement fade enter and fade leave transitions for Vue components by animating opacity from 0 to 1 on enter and 1 to 0 on leave, with adjustable durations.

Demonstrate conditional rendering animations in Vue 3 using v-if and v-else, animate a single element with transition, and wrap in a relative container with absolute h1 elements to avoid overlap.

Build a small invite app in this Vue 3 bootcamp lesson, using transitions to animate multiple elements, accepting names via input, and prepending new invites to the list on enter.

Use transition group to animate multiple elements in a Vue 3 app. Implement enter, enter from, and enter to styles with opacity, scale, and 0.5s transitions.

Learn to animate other cards into place in Vue 3 by creating a move transition for invitees, adjusting duration and easing, and using absolute positioning to enable smooth leave animations.

Master page transition animations in a Vue Router app by wrapping router-view in a transition and animating enter from opacity 0 and translateX for smooth horizontal route slides.

Animate quiz cards on render with Vue 3 transition group, using appear, enter transitions, and staggered entrances to enhance the user experience.

Learn how to stagger card animations by moving animation styles from CSS to JavaScript, and wire transition lifecycle hooks—before enter, enter, after enter—using a transition group.

Define styles inside Vue lifecycle hooks, remove CSS, and use gsap to control transform and opacity with a 0.4s duration and index-based staggered delays.

Build a tv database app to search characters from shows like Breaking Bad and Rick and Morty with pagination, and learn data retrieval, iteration, and rendering cards.

Understand how the front end fetches data from a restful API, using endpoints like /characters or /episodes, with the API querying the database to return responses.

Create a new vue app, install dependencies, and run the dev server to view it on localhost. Import the provided HTML/CSS styles into the project.

Fetch data from an external database by making an HTTP request in the cards component, wire the app view to render Breaking Bad cards via the hero and cards components.

Fetch character data for the Breaking Bad cards component using axios in a Vue 3 script setup, calling the /api/characters endpoint and rendering UI cards.

Learn to wrap a top-level async component in Vue's suspense, use default and fallback slots, and show a loading state until http data renders the Breaking Bad cards.

Fetch paginated data on the front end using limit and offset, starting with eight characters, and load the next eight on button click to improve performance and user experience.

Implement pagination in Vue by adding next and back buttons, using page and offset (eight per page) to fetch data with axios, and updating characters with a watch.

Build the user interface by rendering Breaking Bad character cards with a reusable card component, wiring props for image, name, and occupation, and integrating the Native UI library.

Wrap the list in a div with class jobs to enable display flex and flex wrap, then add a pagination container with page minus and page plus buttons.

Learn to fetch data for the Rick and Morty API using Vue 3 lifecycle hooks, rendering Rick and Morty cards, and comparing this approach to the Breaking Bad API.

Fetch data with on mounted from the Rick and Morty API using Axios, handle the response structure with info and results, and render 20 characters per page via page-based pagination.

Master slots in Vue 3 to build a reusable card component that renders API data from Rick and Morty and Breaking Bad, using slots to customize occupation and location content.

Master Vue 3 slots by building a dynamic component with named slots for header, body, and footer, using templates to pass HTML content.

Improve the user experience with a better loading state for Breaking Bad and Rick and Morty cards using suspense and a centered large spinner.

Create a Vue 3 header component that toggles between Breaking Bad and Rick and Morty using props and emits, enabling parent-child communication and conditional hero content.

Preserve component state across navigation by caching with keep-alive, avoiding extra API calls while conditionally rendering Breaking Bad and Rick and Morty cards.

Explore the concept of state management in Vue 3 and the various approaches, then scaffold a basic app to start hands-on experiments.

Build a small color generator in Vue 3 by inputting red, green, and blue values (0–255) to dynamically render a background color using rgb, with ref, v-model, and style bindings.

Explore declaring state with reactive in Vue 3 by replacing multiple color variables with a single color object and compare reactive to ref and their impact on ui rendering.

Compare ref and reactive: ref accepts primitives and objects, while reactive accepts only objects, and access ref via .value while you access reactive directly.

Learn to manage state across nested components from parent to great grandchild in a Vue 3 app. Explore approaches for sharing state among child components in large apps.

Learn how prop drilling passes state from a parent through a chain of components to a grandchild, why it bloats components, and why better state management is needed.

Use provide/inject to share state across nested Vue components and avoid prop drilling, while noting limitations for shared methods and benefits over prop drilling.

Store and reuse stateful logic with composables in Vue 3 by moving numbers state and its methods into a use numbers composable, enabling cross-component access via the composition API.

learn to use pinia for global state in Vue 3, replacing simple composables with defineStore, including state, actions, getters, plus hot module replacement and SSR support.