Vue - The Complete Guide (incl. Router & Composition API)

Explore Vue's core concepts and essentials, learn how Vue interacts with HTML and templates, output dynamic content, review options and alternatives, and react to user input in depth.

This lecture demonstrates creating and connecting a Vue app instance, mounting to a targeted section, and using a data function to drive reactive text like the course goal.

Use interpolation to render data object properties in Vue controlled HTML with double curly braces. Explore how data and interpolation drive dynamic content across Vue apps.

Learn to bind HTML attributes in Vue using the v-bind directive, replacing interpolation for attributes with dynamic data such as vueLink to create a responsive, clickable link.

Explore how interpolation and v-bind render Vue-managed data, and use the methods option to define outputGoal that randomly selects goals on page reloads for a dynamic Vue app.

Master binding data in a Vue app and using this in methods to output courseGoalA or courseGoalB from data properties.

Use the v-html directive to render HTML strings as real content in Vue, beyond interpolation. Understand when to apply v-html and cross-site scripting risks when rendering HTML.

Learn how to create Vue apps and connect them to HTML using mount with a unique CSS selector, then bind data and methods via data, v-bind, v-html, and interpolation.

Learn how to bind events in Vue using v-on to handle click events, update a reactive counter, and understand Vue's declarative approach that updates the UI automatically.

Learn how to handle events in Vue by moving logic from HTML into JavaScript methods, using counter, and binding add and reduce actions to buttons with event listeners.

Pass arguments to Vue methods by building generic add and reduce functions that accept a parameter and bind the value in HTML, avoiding hard-coded numbers.

Learn to handle the native input event with v-on, update a name data property via setName using event.target.value, and observe Vue reactivity update only the changed paragraph.

Explore how Vue's event modifiers control form behavior, preventing browser default submissions with the prevent modifier, and tailor interactions using left, right, and middle mouse buttons and enter-key triggers.

Discover how the v-once directive locks an initial value in Vue, preventing updates to dynamic bindings and preserving the starting counter while other changes still reflect elsewhere.

Explore two-way data binding in Vue with v-model as a shortcut for binding the input value and listening to input events, featuring a resetInput example.

Explore advanced reactivity in Vue by examining data binding with v-model and event handling, and why using methods to render dynamic values can re-run on changes, prompting a better approach.

Learn how Vue computed properties cache results and re-evaluate only when dependencies change, and bind them in templates like data properties for outputs such as full name.

Discover how Vue watchers trigger on dependency changes, contrast them with computed properties, and learn practical uses like watching name or counter and handling timers or http requests.

Master when to use methods, computed properties, and watchers in Vue, bind data and events efficiently, and manage re-render behavior, dependency updates, and side effects.

Master v-on and v-bind shorthands in Vue, using @ and colon syntax to simplify event listeners and attribute bindings, while staying consistent with modifiers.

Explore dynamic styling in Vue by binding inline styles with v-bind, using a style object and ternary expressions to highlight a selected box through border color changes.

Learn how to bind CSS classes dynamically in Vue using an object syntax with v-bind:class, toggling active and demo classes based on box selections to improve readability.

Use computed properties to manage dynamic class bindings in Vue. Move logic from HTML to the Vue config, using a 'box a classes' computed key to bind box a classes.

Explore Vue's dynamic classes using array syntax to apply multiple derived classes on a single element, combining object syntax and strings to tailor styling for responsive interfaces.

Master Vue fundamentals by using a declarative approach to render dynamic templates, bind data and events with v-bind and v-on, and leverage the reactivity system for DOM updates and styling.

Learn to render content conditionally and output dynamic lists in Vue, showing text only when conditions apply and updating items as the list grows or shrinks.

learn to build a goals app with vue by adding goals to a list, enabling removal, and using conditional rendering to show content when the list is empty or populated.

Render a paragraph when the goals array is empty and an unordered list when it has items, using Vue's v-if and v-model with an addGoal method.

Learn how v-if, v-else, and v-else-if control conditional rendering in Vue by evaluating truthy or falsy expressions, including data, computed property, or methods, and checking goals length.

Compare v-if and v-show: v-if adds or removes DOM elements, v-show hides via CSS and is not compatible with v-else or v-else-if; use v-if by default, v-show for changing visibility.

Use v-for to render a list by iterating over the goals array and outputting goal’s text in list items. Vue updates DOM efficiently, adding only new items as goals grow.

Master v-for in vue by iterating arrays and objects, accessing item index and keys, rendering ranges of numbers, and removing items to keep lists dynamic with interpolation.

Remove list items by clicking on a goal, passing its index to removeGoal, and using splice to update the goals array, leveraging Vue's reactivity for a dynamic list.

Learn how Vue's v-for reuses DOM elements and why adding a unique key attribute prevents lost input state and performance issues, using the goal text as a key example.

Master conditional rendering and list rendering in Vue using v-if, v-show, v-else, v-else-if, and v-for, including keys, wrappers, and best practices for objects and ranges.

Build the Monster Slayer game to practice core Vue basics like data binding, interpolation, v-bind, v-on, v-for, and v-if, with a battle log and game over screen.

Set up a Vue app by mounting to a game div, initialize data for player and monster health, and implement attack methods with random damage that also trigger a counterattack.

Trigger attackMonster with a click, bind dynamic widths to health bars using inline styles and style bindings, and move logic into computed properties for a cleaner Vue app.

Implement a Vue-based special attack: a button dealing 10–25 damage, available every three rounds, controlled by mayUseSpecialAttack and currentRound logic.

Implement a heal feature via a heal button, using a random value between eight and 20, capping health at 100 and counting healing as a round before the monster counterattacks.

Learn to implement a game over screen in Vue by watching player and monster health, computing a winner or draw, and showing conditional messages with v-if and a restart option.

Set health bars to zero percent when health falls below zero, and add start new game and surrender flow that resets health and declares monster winner with a battle log.

Create a battle log that records who did what and value with addLogMessage, renders logMessages via v-for, showing actionBy, actionType, and actionValue for attack and heal, resetting on new game.

Explore how Vue works behind the scenes, including its reactivity system and the virtual dom, to efficiently update what you see on screen.

Explore Vue's built-in reactivity with a simple app that updates a message via data, methods, event bindings, and interpolation. Vue uses proxies to make the data reactive.

Explore how Vue uses proxies to make data reactive, contrasting with vanilla JavaScript, and see how a set trap updates derived properties like longMessage, with computed properties and watchers.

Understand how to run multiple Vue apps on one page by mounting separate apps to sections, keeping data isolated, and recognizing when to keep related inputs in a single app.

Understand how Vue templates map apps to DOM sections by mounting each app to a unique HTML part, and compare the HTML-based template with the string template option using backticks.

discover how to use refs in Vue to retrieve an input value on demand via this.$refs, reducing per-keystroke logging.

Discover how Vue detects updates through its reactivity system, renders templates to the DOM, and uses a virtual DOM to efficiently update only the changed elements for peak performance.

Explore the Vue app lifecycle and its hooks, from beforeCreate to unmounted, and see how the virtual dom, template compilation, mounting, updates, and cleanup occur in the browser.

Explore the Vue app lifecycle in action by implementing and observing hooks like beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeUnmount, and unmounted, including an example of unmounting after three seconds.

Explore Vue components, a core feature built on independent Vue apps, and learn what a component is, why we use it, and how to create them.

Explore building a dynamic friends list in Vue by moving data from HTML to a Vue app, rendering with v-for, and solving per-item detail toggling with components.

Learn how to create reusable Vue components that encapsulate HTML, data, and logic, using createApp and the component method to register mini apps with a dash-delimited identifier.

Harness the power of components to build the entire user interface by combining reusable blocks. Encapsulate templates and their logic into components to structure complex apps and keep code modular.

Explore why the one JavaScript file plus HTML file setup doesn't scale, and how the Vue CLI offers a better development setup to build Vue apps at scale.

Learn why a local development server matters for Vue projects, replacing file protocol testing with https workflows, and how a dev server mirrors real hosting for reliable feature testing.

Understand why a better developer experience matters for Vue apps, reducing full reloads, preserving state, and improving IDE hints while enabling multi-file structure via the Vue CLI.

The Vue CLI is not mandatory, but you can install Node.js, npm, and the Vue CLI to create projects with vue create and run npm run serve to view locally.

Open the Vue CLI generated project and inspect node_modules, public, and source folders. Explain how npm run serve starts the development server and npm install fetches dependencies for single-page app.

Examine how the source folder hosts the Vue app, import createApp, and use App.vue as a single-file component with template, script, and style sections, plus the build workflow.

Install the Vetur extension in Visual Studio Code to enable syntax highlighting for .vue files and improve Vue development with auto completion and a better IDE experience.

Discover how .vue files serve as single-file components containing a template and configuration, replacing plain HTML templates, and organize with assets and components folders to compose the UI.

Set up a brand new Vue project using the attached Vue CLI template, install dependencies with npm install, and run npm run serve to view the app locally.

Explore building a basic Vue app by creating App.vue with template and script, exporting a default config, importing it in main.js, and mounting to the app div.

Create and register a friend-contact component in a Vue app, wiring its data and toggle details, then use it as a custom element in the app view.

Define styling in Vue components using the style section, optionally scope it to a component, import a CSS file, and enjoy auto reload with better IDE support.

Learn to build reusable Vue components and enable inter-component communication to create rich user interfaces. Explore data passing methods and when to use each approach.

Explore how props let a parent pass data to child components in Vue. Define props in camelCase and use kebab-case in templates to render name, phone number, and email address.

Explore how Vue props enable parent-child communication and unidirectional data flow from app to friend contact. Learn how to manage isFavorite with internal state or by updating the parent.

learn how to replace a simple props array with a detailed props object in Vue, including type, required, default, and validators, to catch errors in development.

Bind dynamic prop values in Vue with v-bind to pass non-string data and booleans, and use v-for with keys to render multiple components bound to names, phones, and emails.

Explore parent-child communication in Vue: pass data with props, emit custom events with $emit, and update parent data to reflect changes through unidirectional data flow.

Define and validate custom events in Vue by declaring emits, documenting which events a component will emit, and optionally validating event arguments like an id to improve developer clarity.

Demonstrates adding a new Vue component to create a friend, using props and custom events to pass data between NewFriend.vue and App.vue, with v-model inputs for name, phone, and email.

Add a delete button in the FriendContact component that emits a delete event with the friend's id to App.vue, where you listen and filter the array to remove that id.

This lecture demonstrates a small Vue app to show how components communicate via props and events, revealing the problem of unnecessary pass-through and how Vue addresses it.

Learn to use Vue's provide and inject to pass data like topics from App.vue to KnowledgeGrid, avoiding prop drilling and ensuring reactive updates.

Learn to use provide and inject to pass a function as a topic activation handler across components, enabling a click to trigger the selected topic without props or emits.

Explore how provide and inject enable parent-child communication in Vue, especially for pass-through components, while recognizing props and custom events remain the default and easier approach.

Understand how Vue components communicate through a unidirectional data flow, with props for downward data, custom events for upward data, and provide-inject for long-range data across parent-child relationships.

Master advanced component usage in Vue by examining multiple registration methods, scoped styling, and the purpose of slots, dynamic components, and component names, while organizing files with clear folder structures.

Install dependencies and start the development server to run the basic dummy Vue app. Explore the component structure—main.js imports, App.vue composition with The-Header-Component, Badge-List-Component, and User-Info-Component—and see props and dynamic CSS in action.

Register components as global or local in Vue to optimize apps. Global components are available everywhere but can bloat initial load; local components stay inside one component, keeping main.js lean.

Apply the scoped attribute to style tags in .vue files to confine styling to a component's template. Vue uses data- attributes to enforce this, preventing global spillover.

Explore slots in Vue to create reusable wrappers like BaseCard that render HTML content with scoped styling and card look, while showing how slots differ from props for dynamic content.

Explore using named and default slots in Vue by turning content into reusable base-card wrappers, assigning header and main content with v-slot, and applying across BadgeList and UserInfo.

Learn how Vue slots and scoped styles determine styling across components, and how moving header styles from UserInfo to the BaseCard component restores the original look.

Delve into Vue slots, including default content and named header slots, learn to use slot fallbacks and dollar-sign slots, and conditionally render with v-if and the v-slot shorthand.

Learn how scoped slots in Vue enable data from the component to be passed into slot markup, allowing customizable list items through v-slot and slot props.

Switch between active goals and manage goals using Vue's dynamic components. Bind the is prop to selectedComponent to render the chosen component with less code.

Wrap dynamic components with Vue's keep-alive to preserve input state across view switches, preventing data loss and caching component state behind the scenes.

This lecture demonstrates adding a set-goal feature with form validation in Vue, using refs and v-model to check input, and replacing browser alerts with a reusable ErrorAlert modal.

Use Vue's Teleport to render a dialog at the body root, improving semantic HTML and accessibility. Pass a CSS selector to position Teleport's content while keeping component logic.

Explore fragments in Vue, enabling multiple top-level elements without a wrapping root, contrasted with the older single-root requirement in earlier Vue templates for cleaner, semantic structures.

Consult the official Vue style guide to structure folders, name files, and follow recommended conventions such as one component per file and base components like BaseButton.

Organize Vue project by moving components into subfolders such as base UI and layout, update imports in main.js, and structure features like cart, checkout, and products to keep code manageable.

Master component registration and styling in Vue, learn global and local approaches, and explore slots, dynamic components with keep alive, and teleport for a complete project.

build a Vue application from a to z, using components, tabs to switch areas, a resources list with add, delete, and validation alerts, illustrating core features from the course.

Begin a Vue project by installing dependencies and running the dev server, then build a component-driven App.vue that renders a dummy resources list with v-for.

Create a reusable learning resource component and render resources with v-for, passing title, description, and link as props. Register the component in App.vue and use the kebab-case tag.

Set global styles in App.vue and apply component-scoped styling for the learning resources. Build modular components (StoredResources and LearningResource) with props and local imports to style lists and headers.

Build reusable ui components by implementing a BaseCard with a slot, registering it globally, and creating a header component TheHeader that renders a dynamic title in the app layout.

Develop a reusable base button component in Vue with default styling, props for type and mode, a slot for content, and global registration; then enable adding resources via a form.

Explore dynamic components and attribute fallthrough in Vue to switch between stored resources and add resource using the is prop, and register components locally with a resources prop.

Learn to share resources across components with Vue's provide and inject, relocate data from App.vue to resources component, register and render it, and use computed properties to style tab buttons.

Add a resource form on the add resource screen with title, description, and link inputs, a textarea, and a submit button, styled with scoped CSS for a polished, accessible UI.

Fetch user input in Vue by using refs for title, description, and url, submit data, and add a new resource via provide/inject, with keep-alive to preserve form state.

Demonstrates implementing a reusable base dialogue in Vue to validate inputs, show a custom modal on errors, and handle backdrop-close via a close event for add resource.

Learn to delete resources by wiring the delete button to a removeResource method, update storedResources with findIndex and splice, and reflect changes via provide/inject.

Learn how to use Vue's teleport to move the base dialogue and backdrop to the body by wrapping them in a teleport component with the to prop.