Vue JS Bootcamp: Build YouTube Clone and Job Ready Projects

Explore Node.js and npm installation, understand how the V8 engine runs JavaScript, and set up Vue.js with VSCode, including version checks and installation steps.

Mount a Vue instance via an external app.js, return a data object with name and position, and render them in the dom using template bindings while noting script tag order.

Install and use the Vue CLI globally, verify installation, create a Vue 3 project, explore generated files, and start a local development server to bootstrap a YouTube clone project.

Explore the post-install project structure for a Vue app, covering vue.config.js, babel config, package.json, readme, and which files to modify in src and public for browser compatibility.

Explore how Vue components are organized across index.html and dot view files, with template, script, and style blocks, and how the app mounts to a div via main.js.

Explore binding techniques in Vue by creating a data object bound to the template with mustache syntax, v-text, and v-html, then compare how each renders name, age, and Nvidia.

Master v-bind to dynamically assign id, class, and HTML attributes, compare with mustache binding, and drive element states like a disabled button using a boolean employed flag.

Master conditionals in Vue with v-if, v-else, and v-else-if, explore booleans and v-show, and understand how rendering affects the DOM versus visibility.

Explore Vue computed properties by deriving a full name from first and last names and calculating an item total using reduce. Leverage data, this, and text interpolation.

Compare computed properties and methods in Vue.js, implement methods with parameters, and use watchers to enforce boundaries with conditional alerts.

Define Vue components with the dot Vue extension using template, script, and export default. Import them into app dot Vue to compose header, side nav, main, and footer.

Explore how props pass custom attributes from a parent to a child component, enabling dynamic data, reusability, and data binding with colon shorthand for multiple values.

Learn event handling in Vue using v-on for click and hover, update data with increment and decrement, and use custom events for child-to-parent communication via pop up view with v-show.

Learners implement a custom event driven popup in a Vue JS app by wiring a show popup flag to a show button and a close button in the child component.

Learn how a custom event uses emit to signal a close action from a child to its parent, allowing the popup to close and revert to its original position.

Explore how slots in Vue.js enable dynamic, bidirectional data flow between child and parent components, using a box view example to pass default and dynamic content.

Learn how to implement dynamic components in vue.js by toggling between three pages with an active page state, using v-if and the is binding to render components on demand.

Explore how async and await fetch data from a different server, pause the user interface until the data arrives, and use loading indicators to ensure a smooth experience.

Explore building an asynchronous box view in Vue using a promise and await. Use suspense with default and fallback templates to display a loading state before data resolves.

Explore Vue mixins to reuse code across components by exporting a JavaScript object with shared data and methods, illustrated with click and hover counters.

Learn to create and use custom directives in Vue, which are not predefined, by defining a v-size directive in JavaScript to set font size and apply it to a div.

Learn how to set up vue router in a single page app, navigate between home and about pages, and configure routes with create router and history.

Learn to implement route parameters in Vue by wiring fruit box and fruit details routes, using dynamic ids, and accessing the id with route.params.id to render the selected fruit.

Learn how dynamic links work in Vue by using router-link with fruit IDs to navigate from a list to a details page, laying groundwork for nested routes.

Learn to implement nested routing in Vue by embedding a child component within the parent, using router-view and router-link to show apple price on the same page.

Learn Vuex as a centralized state management tool, replacing prop drilling with a single store containing state, actions, mutations, and getters, enabling tracked changes with rollback capability across components.

Set up Vuex in a Vue project, move the count state into a centralized store, and use mutations, actions, and getters to increment or decrement the value across components.

Learn how Vuex actions and getters operate in a stateful store, dispatch actions, commit mutations, and compute the count's square with getters, plus a preview of Axios API calls.

Learn to organize Vuex state with modules by separating state, getters, mutations, and actions into separate files and exporting them to enable increment and decrement and future Axios API fetching.

Learn how to fetch data from servers using HTTP requests and Axios, covering get, post, put, delete, and patch methods, API requests, and promise-based async/await patterns.

Fetch data from the API, display posts on the page with a v-for loop showing each post's id and title, and post new data with userId and title.

Handle errors in Vue.js by using asynchronous data fetching with try-catch and axios. Use the mounted function to run async calls, display user-friendly messages, and log errors with console.error.

Learn how protected routes enforce authentication in a Vue.js app by building a login page, configuring router paths, and gating access to the home page.

Implement protected routes by adding route meta requires auth and managing login state with Vuex; use router beforeEach to redirect unauthenticated users to login.

Learn to use the beautify tool from Vue.js to quickly scaffold front-end components with a pre-written template, and understand app versus main structure and responsive breakpoints.

Explore how Beautify uses grid and flexbox to create responsive Vue.js layouts with v-container, v-row, v-col, v-card, and v-btn across xs to lg breakpoints.