Vue JS - The Complete Guide [2026]

Create and mount a Vue app in an index.html by importing createApp, using setup in the composition API, and returning a message bound to a div with double curly braces.

Explore arrays like lucky numbers and objects like employee in Vue.js, using double curly bracket interpolation to render values and access object properties such as name and age.

Explains how to create functions inside setup in the composition API, using a get random lucky number function with Math.random, returning and calling it to display a random number.

Practice function creation by implementing a getMessage function that returns the displayed hello view message in uppercase, as your first assignment.

Implement a getMessage function that returns the message and display it, removing unnecessary props from the UI. Use toUpperCase to render the message in uppercase, ensuring the hello view works.

Use ref from Vue to keep a dynamic value in sync with the UI. Update ref.value for the lucky number and see the dom update.

Uses set timeout to update a lucky number after two seconds, showing an initial six changing to 77 and creating a dynamic visualization of state updates.

Apply ref to a complex object, like employee, to enable dynamic updates. Access employee.value.salary and render it in a p tag, with salary 50,000 updating to 60,000.

Learn how reactive and ref in Vue manage dynamic data: apply reactive to objects, ref to primitive types, and use dot value semantics when necessary.

Explore how Vue handles reactivity using ref for primitives and reactive for objects. Update the lucky number to see the UI rerender, while a non-reactive message won't.

Explore Vue view directives, especially v-html, which renders dynamic HTML and applies reactive behavior to the DOM. Learn how to pass get message as a parameter to render HTML content.

Learn how the v-once directive renders an element only once, so subsequent data changes won't update the dom, as shown in a lucky number example.

Clean up Vue by adding h1 and returning message. Remove unused code, add a lucky numbers array, and extend employee with corporate card, spending limit, and years at the company.

Learn how to use the v-show directive to conditionally display data in Vue.js, toggling the visibility of a spending limit based on employee.has corporate card.

Explore the v-if directive in Vue.js and contrast it with v-show. v-if removes elements from the dom when false, while v-show hides them with display none.

Explore v-else and v-else-if directives to dynamically toggle displays based on if and else conditions, including nested if-else with corporate card eligibility tied to salary and years with the company.

Learn how to iterate over a collection with Vue's v-for directive, displaying an array of lucky numbers and their index to build dynamic lists.

Join the lesson to iterate over an object in Vue and display key-value pairs, noting that the first v-for parameter is the value, followed by the key.

Learn how v-once behaves inside a loop in Vue.js, rendering a value only once and leaving it unchanged across iterations, as demonstrated with a lucky number.

Learn how using a unique key in Vue's v-for enables reliable patching and keeps inputs in sync during reordering, with a practical example using project names as keys.

Clean the project by removing the setup script and HTML clutter, display Hello world, keep it simple, and prepare the app for the next section with new directives.

Learn to bind dynamic styles in Vue with v-bind:style, using an object of camelCase properties like backgroundColor and fontSize, or string keys in kebab-case for CSS.

Explain how dynamic style bindings with v-bind reflect a font size variable, using a local fontSizeTemp to apply pixels.

Learn to bind dynamic classes in a Vue.js component using toggle methods, an object of class flags, and ternary logic to apply or omit styles such as main title and green background.

Learn to bind classes and styles in Vue using boolean values, object style bindings, and arrays of classes with nested properties, a ternary operator, and borders.

Discover the v-bind shorthand by using a colon before class and style attributes, replacing vbind with colon for cleaner, functionally identical code.

Perform cleanup by removing all content from the div and view, ensuring nothing returns, and setting aside style for later as you return to hello world to perfect the cleanup.

Learn to handle a button click in Vue.js using the v-on directive to bind a click event. Define a button click function in setup that shows an alert on click.

Learn how to pass parameters to functions on click in Vue JS, display dynamic alerts, and handle multiple parameters to drive flexible UI behavior.

Capture click data with the on click event and its event object, including x and y coordinates. Log and display these coordinates using refs and event properties.

Explore Vue event modifiers, where dot postfixes alter directives and control events. Use dot stop, dot prevent, and dot once for safer, more precise interactions.

Master Vue key modifiers to trigger events only on specific keystrokes, such as enter, using v-on keyup and key aliases; explore combinations like ctrl+enter for custom interactions.

Explore how v-model modifiers extend input handling, using dot trim to remove spaces, .lazy to update on focus out, and .number to ensure numeric values.

Vue.js users convert get full name into a computed property to cache its value, recomputing only when first name or last name changes, improving performance.

Master watchers in Vue to observe data changes with the watch keyword, access new and old values, trigger async side effects like API calls, and compare with computed properties.

Set up a first Vue project using Bootstrap for quick styling, create a reactive movies array and a new movie object, and bind inputs to add and display movies.

Implement add and remove movie actions in a Vue JS assignment using push and pop, enforcing a five-movie limit and disabling add when full.

Implement button events in vue js by creating add movie and remove movie functions that manage a movies array with push, pop, and the spread operator, enforcing a five-movie limit.

Convert a function to a computed property and create getAllMovieText, removing parentheses in usage. Add a watcher to toggle showMessage when movies length reaches three.

Compare computed properties and watchers in Vue.js, and convert a watcher to asynchronous with async, then use setTimeout to display a message after three seconds.

Explore the Vue shorthand for event handling by replacing v-on with @click and v-bind with a colon to simplify template syntax.

Explore creating and binding a reactive form object in setup, with fields for email, name, phone number, subscribe checkbox, and gender dropdown, plus phone number validation and submit value capture.

Bind the form to inputs via a view model, include email, name, and phone with a subscribe checkbox, then prevent default submit to handle data and log the form object.

Implement a gender radio button set in a Vue form, binding to formObj.gender, using bootstrap form check inline, and verify submission shows the selected value.

Replace a radio button with a dropdown using a select bound to formObj.gender via v-model, styled with bootstrap form-select, offering male and female options with a default of male.

Demonstrate on blur validation in a Vue form by validating the name field with a custom function and showing a conditional error when the name is missing or too short.

Master Vue.js form validation by managing a reactive error list, displaying errors at the top, and validating name, email, and newsletter subscription on submit.

Create a Vue project using vite by running npm create vue@latest, configure features as needed, then install dependencies and run npm run dev to see a scaffolded spa.

Remove all vue files from project, delete assets and components, and app.vue, then restart with index.html and main.js, and mount the app on the div with id app in index.html.

Mount a Vue app by importing createApp, creating an app component, and mounting it to the div with id app in index.html; render hello world via a template.

See how a Vue component uses template, script, and style, and defines a setup method, and returns data for the template to bind with double curly brackets.

Create and use a main component with reusable child components in Vue, import a contact us component locally or globally, and register it to render in the UI.

Create a new Vue component called button counter, use setup with a ref to track clicks, display the count, and register it globally; make the contact email dynamic.

Explore a cleaner setup using the composition API in Vue by removing export default, setup, and return, and rely on setup in the script tag to access the template.

Compare local versus global component registration in Vue.js by importing a local button counter in app.vue and noting how each component maintains its own state and load performance.

Convert a global Vue component to a local component by importing it in App.vue and adjusting registration in Main.js, illustrating how dependencies influence component scope.

Add bootstrap to the Vue project by including the CDN and JavaScript, then wrap content in a container div and remove the button counter for the contact us section.