Video description
Vue.js is a highly popular framework that provides a reactive and great user experience not only for mobile apps but also for browser applications. Hence, it is the highest-paid one in the front-end development industry.
This course starts with an introduction to Vue.js and explains why it is a great JavaScript framework. Then you will learn the basic syntaxes and templates of Vue.js and see how to output reactive data and handle keyboard events. Moving along, you will learn how to interact with Document Object Model (DOM) and set up a development environment and workflow with the Vue CLI. Then we will walk through the various components and show you how to work with forms and HTTP requests.
Next, you will learn how to make your app appealing with animations and transitions and understand the importance of routing and Vuex in Vue.js. Finally, we will create a stock trader application and learn the stages in deploying a Vue.js application. You will also learn how to use Axios instead of Vue resources and underline the concepts of authentication in Vue apps.
By the end of this course, you will have developed the essential Vue.js skills needed for frontend web development and to develop reactive browser applications.
What You Will Learn
- Understand what Vue.js is and its applications
- Set up developer environment and workflow with the CLI
- Create a learning resource app to understand components, forms, and styling
- Build a single-page application to understand routing
- Find out how to implement animations and transitions in Vue apps
- Improve state management using Vuex
Audience
If you are a software engineer or web developer interested in frontend development or want to build reactive browser applications using Vue.js, this course is for you. Basic knowledge of JavaScript, HTML, and CSS is necessary to get started with this course.
About The Author
Maximilian Schwarzmüller: Maximilian Schwarzmüller: A professional web developer and instructor, he has never stopped learning new programming skills and languages since the age of 13. In his early days, he started creating websites simply for fun. This passion has remained and shaped his decision to work as a freelance web developer and consultant. Although he started web development on the backend (PHP with Laravel and NodeJS), he has progressed to becoming a front-end developer using modern frameworks such as React, Angular, and VueJS 2 in many projects.
The most rewarding experience for him is to see how people find new and better jobs, build exciting web applications, acquire amazing projects, or simply enjoy their hobby with the help of his content.
Table of contents
-
Chapter 1 : Getting Started
- Welcome to the Course!
- What is Vue.js?
- Different Ways of Using Vue
- Exploring Vue Alternatives
- Building Your First App with JavaScript
- Re-Building the App with Vue.js
- Vue Versus Vanilla JavaScript (Just JavaScript)
- Setting Up the Course Development Environment
- Course Outline and Contents
- How to Get the Most Out of This Course
-
Chapter 2 : Basics and Core Concepts – Document Object Model (DOM) Interaction with Vue
- Module Introduction
- Creating and Connecting Vue App Instances
- Interpolation and Data Binding
- Binding Attributes with the “V-Bind” Directive
- Understanding “Methods” in Vue Apps
- Working with Data Inside a Vue App
- Outputting Raw HTML Content with V-html
- First Summary
- Understanding Event Binding
- Events and Methods
- Working with Events and Arguments
- Using the Native Event Object
- Exploring Event Modifiers
- Locking Content with V-Once
- Data Binding + Event Binding = Two-Way Binding
- Methods Used for Data Binding: How it Works?
- Introducing Computed Properties
- Working with Watchers
- Methods Versus Computed Properties Versus Watchers
- V-Bind and V-On Shorthands
- Dynamic Styling with Inline Styles
- Adding CSS Classes Dynamically
- Classes and Computed Properties
- Dynamic Classes: Array Syntax
- Module Summary
- Chapter 3 : Rendering Conditional Content and Lists
- Chapter 4 : Course Project: The Monster Slayer Game
- Chapter 5 : Vue: Behind the Scenes
- Chapter 6 : Introducing Components
-
Chapter 7 : Moving to a Better Development Setup and Workflow with the Vue CLI
- Module Introduction
- Why You Need a Development Server?
- Why You Want a Better Developer Experience?
- Installing and Using the Vue CLI
- Inspecting the Created Project
- Inspecting the Vue Code and “.vue” Files
- Adding the “Vetur” Extension to Visual Studio Code
- More on “.vue” Files
- A New Vue Project
- Creating a Basic Vue App
- Adding a Component
- Adding Styling
-
Chapter 8 : Component Communication
- Module Introduction
- Introducing “Props” (Parent => Child Communication)
- Prop Behavior and Changing Props
- Validating Props
- Working with Dynamic Prop Values
- Emitting Custom Events (Child => Parent Communication)
- Defining and Validating Custom Events
- Demo: Adding Components and Connecting Them
- Demo: Adding More Component Communication
- A Potential Problem
- Provide + Inject to the Rescue
- Provide + Inject for Functions/Methods
- Provide + Inject Versus Props and Custom Events
- Module Summary
-
Chapter 9 : Diving Deeper into Components
- Module Introduction
- Project Setup
- Global Versus Local Components
- Scoped Styles
- Introducing Slots
- Named Slots
- Slot Styles and Compilation
- More on Slots
- Scoped Slots
- Dynamic Components
- Keeping Dynamic Components Alive
- Applying What You Know + a Problem
- Teleporting Elements
- Working with Fragments
- The Vue Style Guide
- Moving to a Different Folder Structure
- Module Summary
-
Chapter 10 : Course Project: The Learning Resources App
- Module Introduction
- Setup and First Steps
- First Component and Prop
- Styling and More Components
- Header and BaseCard Components
- Adding a Base Button
- Dynamic Components and the Fallthrough Attribute
- Adding and Styling Tabs
- Adding a Form
- Fetching User Input
- Adding a Modal Dialog
- Deleting Items
- Adding “Teleport”
- Chapter 11 : Forms
-
Chapter 12 : Sending HTTP Requests
- Module Introduction
- Starting App and Why You Need a Backend
- Adding a Backend
- How to (Not) Send HTTP Requests
- Sending a POST Request to Store Data
- Getting Data (GET Request) and Transforming Response Data
- Loading Data When a Component Mounts
- Showing a “Loading…” Message
- Handling the “No Data” State
- Handling Technical/Browser-Side Errors
- Handling Error Responses
- Module Summary
-
Chapter 13 : Routing: Building “Multi-Page” Single Page Applications
- Module Introduction
- Routing: What and Why?
- Routing Setup
- Registering and Rendering Routes
- Navigating with Router-link
- Styling Active Links
- Programmatic Navigation
- Passing Data with Route Params (Dynamic Segments)
- Navigation and Dynamic Paths
- Updating Params Data with Watchers
- Passing Params as Props
- Redirecting and “Catch All” Routes
- Using Nested Routes
- More Fun with Named Routes and Location Objects
- Using Query Params
- Rendering Multiple Routes with Named Router Views
- Controlling Scroll Behavior
- Introducing Navigation Guards
- Diving Deeper into Navigation Guards
- The Global “afterEach” Guard
- Beyond Entering: Route Leave Guards
- Utilizing Route Metadata
- Organizing Route Files
- Summary
-
Chapter 14 : Animations and Transitions
- Module Introduction
- Animation Basics and CSS Transitions
- Understanding CSS Animations
- Why Is “Just CSS” Not Enough?
- Playing CSS Animations with Vue's Help
- Using the Transition Component
- CSS Animations with the Transition Component
- Using Custom CSS Class Names
- Example: Animating a Modal
- Transitioning Between Multiple Elements
- Using Transition Events
- Building JavaScript Transitions (Instead of CSS)
- Disabling CSS Transitions
- Getting Started with Animated Lists
- Animating Lists with “Transition-Group”
- Animating List Item Movement
- Animating Route Changes
-
Chapter 15 : Vuex
- Module Introduction
- Vuex: What and Why?
- Creating and Using a Store
- Connecting Components to State
- Introducing Mutations - A Better Way of Changing Data
- Passing Data to Mutations with Payloads
- Introducing Getters - A Better Way of Getting Data
- Running Async Code with Actions
- Understanding the Action “Context”
- Using Mapper Helpers
- Example: Adding More States
- Organizing Your Store with Modules
- Understanding Local Module State
- Namespacing Modules
- Structuring Vuex Code and Files
- A Challenge!
- Challenge Solution – Part 1
- Challenge Solution – Part 2
- Challenge Solution – Part 3
- Summary
-
Chapter 16 : Main Project: “Find a Coach” Web App
- Module Introduction
- Planning the Project/Web App
- Planning the Data Requirements
- Planning the Layout/Components
- Registering Routes
- Adding Route Page Components
- Working on the Main Layout and Styling
- Wiring Up Pages
- Adding Vuex and Coach Data
- Working on the Coaches List and List Items
- Adding a Couple of Base Components (Base Card, Base Button, Base Badge)
- Building the Coach Detail Component
- Filtering Coaches
- Registering as a Coach: The Form
- Adding Coaches to Vuex
- Adding Form Validation
- Working on the Contact Form
- Storing Requests (Messages) with Vuex
- Outputting Incoming Requests (Messages)
- Filtering Requests for the Active Coach
- Sending a PUT HTTP Request to Store Coach Data
- Fetching Coach Data (GET HTTP Request)
- Rendering a Loading Spinner
- Adding HTTP Error Handling
- Sending Coaching Requests Using HTTP Requests
- Caching HTTP Response Data
- Adding Route Transitions
- The “Not Found” Page and Summary
-
Chapter 17 : Vue and Authentication
- Module Introduction
- How Authentication Works in Vue Apps [or Any Single-Page Application (SPA)]?
- Locking/Protecting Backend Resources
- Adding an Authentication Page (Login and Signup)
- Preparing Vuex
- Adding a “Signup” Action and Flow
- Better UX: Loading Spinner and Error Handling
- Adding a “Login” Action and Flow
- Attaching the Token to Outgoing Requests
- Updating the UI Based on Auth State
- Adding a “Logout” Action and Flow
- Authentication and Routing (Including Navigation Guards)
- Adding “Auto Login”
- Adding “Auto Logout”
- Summary
- Chapter 18 : Optimizing and Deploying Vue Apps
-
Chapter 19 : The Composition API – Replacing the Options API
- Module Introduction
- Which Problem Does the Composition API Solve?
- Replacing “Data” with “Refs”
- Building “Reactive” Objects
- Reactivity: A Deep Dive
- Replacing “Methods” with Regular Functions
- Replacing “Computed Properties” with the “Computed” Function
- Two-Way Binding and the Composition API
- Working with Watchers
- A First Summary
- How to Use Template Refs
- Components, Props, and the Composition API
- Emitting Custom Events
- Working with Provide/Inject
- Lifecycle Hooks in the Composition API
- Migrating from Options API to Composition API - An Example Project
- Migrating a First Component
- Migrating a Big Component
- Migrating the Remaining Components
- Routing, Params, and the Composition API
- Route and Router Objects and the Composition API
- Using Vuex with the Composition API
- Summary
-
Chapter 20 : Reusing Functionality: Mixins and Custom Composition Functions
- Module Introduction
- Reusability Concepts
- Using Mixins
- Merging Mixins
- Global Mixins
- Disadvantages of Mixins
- Custom Hooks/Composable and the Composition API
- More Custom Composition Functions
- Why Hooks/Composable Beat Mixins?
- Example: Creating a “Search” Hook
- Custom Hooks Gotchas
- More Thoughts on Custom Hooks/Composable
- Example: A Custom “Sort” Hook
- Chapter 21 : Roundup and Next Steps
- Chapter 22 : Vue 2 to Vue 3 Migration
- Chapter 23 : Getting Started [VUE2]
-
Chapter 24 : Using Vue.js to Interact with the Document Object Model (DOM) [VUE2]
- Module Introduction
- Understanding Vue.js Templates
- How the Vue.js Template Syntax and Instance Work Together
- Accessing Data in the Vue Instance
- Binding Attributes
- Understanding and Using Directives
- Disable Re-Rendering with V-Once
- How to Output Raw HTML?
- Listening to Events
- Getting Event Data from the Event Object
- Passing Your Own Arguments with Events
- Modifying an Event - with Event Modifiers
- Listening to Keyboard Events
- Writing JavaScript Code in the Templates
- Using Two-Way Binding
- Writing JavaScript Code in the Templates
- Reacting to Changes with Computed Properties
- An Alternative to Computed Properties: Watching for Changes
- Saving Time with Shorthands
- Dynamic Styling with CSS Classes – Basics
- Dynamic Styling with CSS Classes - Using Objects
- Dynamic Styling with CSS Classes - Using Names Setting Styles Dynamically (without CSS Classes)
- Styling Elements with the Array Syntax
- Module Wrap Up
-
Chapter 25 : Using Conditionals and Rendering Lists [VUE2]
- Module Introduction
- Conditional Rendering with V-If
- Using an Alternative V-If Syntax
- Don't Detach it with V-Show
- Rendering Lists with V-For
- Getting the Current Index
- Using an Alternative V-For Syntax
- Looping through Objects
- Looping through a List of Numbers
- Keeping Track of Elements While Using V-For
- Module Wrap Up
-
Chapter 26 : First Course Project - The Monster Slayer [VUE2]
- Introduction and Challenge
- Setting Up the Course Project
- Creating the Vue Instance and Styling the Healthbars
- Showing the Player Controls Conditionally
- Implementing a “Start Game” Method
- Implementing an “Attack” Method
- Write better Code - Time for Refactoring!
- Implementing a “Special Attack”
- Implementing a “Heal” Method
- Finishing the Action Buttons
- Creating an Action Log
- Printing the Log (v-for)
- Finishing the Log
- Styling the Log Conditionally
- Wrap Up
-
Chapter 27 : Understanding the Vue.js Instance [VUE2]
- Module Introduction
- Some Basics about the Vue.js Instance
- Using Multiple Vue Instances
- Accessing the Vue Instance from Outside
- How Vue.js Manages Your Data and Methods
- A Closer Look at $el and $data
- Placing $refs and Using Them on Your Templates
- Where to Learn More about the Vue API?
- Mounting a Template
- Using Components
- Limitations of Some Templates
- How Vue.js Updates the Document Object Model (DOM)?
- The Vue.js Instance Lifecycle
- The Vue.js Instance Lifecycle in Practice
- Module Wrap Up
-
Chapter 28 : Moving to a “Real” Development Workflow with Webpack and Vue CLI [VUE2]
- Module Introduction
- Why Do You Need a Development Server?
- What Does “Development Workflow” Mean?
- Using the Vue CLI to Create Projects
- Installing the Vue CLI and Creating a New Project
- Overview of the Webpack Template Folder Structure
- Understanding the “.vue” Files
- Understanding the Object in the Vue File
- How to Build Your App for Production
- Module Wrap Up
-
Chapter 29 : An Introduction to Components [VUE2]
- Module Introduction
- An Introduction to Components
- Storing Data in Components with the Data Method
- Registering Components Locally and Globally
- “Root Component” in the App.vue File
- Creating a Component
- Using Components
- Moving to a Better Folder Structure
- How to Name Your Component Tags (Selectors)
- Scoping Component Styles
- Module Wrap Up
-
Chapter 30 : Communicating Between Components [VUE2]
- Module Introduction
- Communication Problems
- Using Props for Parent => Child Communication
- Naming “props”
- Using “Props” in the Child Component
- Validating “Props”
- Using Custom Events for Child => Parent Communication
- Understanding Unidirectional Data Flow
- Communicating with Callback Functions
- Communication between Sibling Components
- Using an Event Bus for Communication
- Centralizing Code in an Event Bus
- Wrap Up
-
Chapter 31 : Advanced Component Usage [VUE2]
- Module Introduction
- Setting Up the Module Project
- Passing Content - The Suboptimal Solution
- Passing Content with Slots
- How Slot Content Gets Compiled and Styled?
- Using Multiple Slots (Named Slots)
- Default Slots
- A Summary on Slots
- Switching Multiple Components with Dynamic Components
- Understanding Dynamic Component Behavior
- Keeping Dynamic Components Alive
- Dynamic Component Lifecycle Hooks
- Wrap Up
-
Chapter 32 : Second Course Project - Wonderful Quotes [VUE2]
- Module Introduction
- Setting Up the Project
- Initializing the Application
- Creating the Application Components
- Passing Data with Props and Slots
- Allowing Users to Create Quotes with a NewQuote Component
- Adding Quotes with Custom Events
- Adding an Info Box
- Allowing for Quote Deletion
- Controlling Quotes with a Progress Bar
- Finishing Touches and State Management
-
Chapter 33 : Handling User Input with Forms [VUE2]
- Module Introduction
-
A Basic Form Binding
- Grouping Data and Pre-Populating Inputs
- Modifying User Input with Input Modifiers
-
Binding and Handling User Input
- Using Checkboxes and Saving Data in Arrays
- Using Radio Buttons
-
Handling Dropdowns with and
-
Chapter 34 : Using and Creating Directives [VUE2]
- Module Introduction
- Understanding Directives
- How Directives Work? Hook Functions
- Creating a Simple Directive
- Passing Values to Custom Directives
- Passing Arguments to Custom Directives
- Modifying a Custom Directive with Modifiers
- Custom Directives - A Summary
- Registering Directives Locally
- Using Multiple Modifiers
- Passing More Complex Values to Directives
- Wrap Up
- Chapter 35 : Improving your App with Filters and Mixins [VUE2]
-
Chapter 36 : Adding Animations and Transitions [VUE2]
- Module Introduction
- Understanding Transitions
- Preparing a Code to Use Transitions
- Setting Up a Transition
- Assigning CSS Classes for Transitions
- Creating a “Fade” Transition with the CSS Transition Property
- Creating a “Slide” Transition with the CSS Animation Property
- Mixing Transition and Animation Properties
- Animating V-If and V-Show
- Setting Up an Initial (On-Load) Animation
- Using Different CSS Class Names
- Using Dynamic Names and Attributes
- Transitioning between Multiple Elements (Theory)
- Transitioning between Multiple Elements (Practice)
- Listening to Transition Event Hooks
- Understanding JavaScript Animations
- Excluding CSS from your Animation
- Creating an Animation in JavaScript
- Animating Dynamic Components
-
Animating Lists with
-
Using - Preparations
- Using to Animate a List
-
Chapter 37 : Connecting to Servers through HTTP - Using Vue-Resource [VUE2]
- Module Introduction
- Accessing HTTP through Vue-Resource – Setup
- Creating an Application and Setting Up a Server (Firebase)
- POST Data to a Server (Sending a POST Request)
- Sending and Transforming Data (Sending a GET Request)
- Configuring Vue-Resource Globally
- Intercepting Requests
- Intercepting Responses
- Where the “Resource” in Vue-Resource Comes From
- Creating Custom Resources
- Resources Versus “Normal” HTTP Requests
- Understanding Template URLs
- Wrap Up
-
Chapter 38 : Routing in a Vue.js Application [VUE2]
- Module Introduction
- Setting Up the Vue.js Router (Vue-router)
- Setting Up and Loading Routes
- Understanding Routing Modes (Hash Versus History)
- Navigating with Router Links
- Styling Active Links
- Navigating from a Code (Imperative Navigation)
- Setting Up Route Parameters
- Fetching and Using Route Parameters
- Reacting to Changes in Route Parameters
- Setting Up Child Routes (Nested Routes)
- Navigating to Nested Routes
- Making Router Links More Dynamic
- A Better Way of Creating Links - With Named Routes
- Using Query Parameters
- Multiple Router Views (Named Router Views)
- Redirecting
- Setting Up “Catch All” Routes/Wildcards
- Animating Route Transitions
- Passing the Hash Fragment
- Controlling the Scroll Behavior
- Protecting Routes with Guards
- Using the “BeforeEnter” Guard
- Using the “BeforeLeave” Guard
- Loading Routes Lazily
- Wrap Up
-
Chapter 39 : Better State Management with Vuex [VUE2]
- Module Introduction
- Why a Different State Management may Be Needed
- UUnderstanding “Centralized State”
- Using the Centralized State
- Why a Centralized State Alone Won't Fix it
- Understanding Getters
- Using Getters
- Mapping Getters to Properties
- Understanding Mutations
- Using Mutations
- Why Mutations Have to Run Synchronously
- How Actions Improve Mutations
- Using Actions
- Mapping Actions to Methods
- A Summary of Vuex
- Two-Way Binding (v-model) and Vuex
- Improving Folder Structures
- Modularizing the State Management
- Using Separate Files
- Using Namespaces to Avoid Naming Problems
- Wrap Up
-
Chapter 40 : Final Project - The Stock Trader [VUE2]
- Project Introduction
- Project Setup and Planning
- Creating the First Components
- Set Up Project Routes
- Adding a Header and Navigation
- Planning the Next Steps
- Creating Stocks Components
- Adding a “Buy” Button
- Setting Up the Vuex State Management
- Adding a Portfolio Module to Vuex
- Working on the Portfolio Stocks
- Connecting the Portfolio with Vuex
- Time to fix some Errors
- Displaying the Funds
- Adding Some Order Checks
- Making Funds Look Nicer with Filters
- Ending the Day - Randomizing Stocks
- Animating the Route Transitions
- Saving and Fetching Data - Adding a Dropdown
- Setting Up Vue-Resource and Firebase
- Saving Data (PUT Request)
- Fetching Data (GET Request)
- Testing and Bug Fixes
- Project Wrap Up
- Bonus: Debugging Vuex with Vue Developer Tools
- Chapter 41 : Deploying a Vue.js Application [VUE2]
- Chapter 42 : Bonus: Using Axios Instead of Vue-Resource [VUE2]
-
Chapter 43 : Bonus: Authentication in Vue Apps
- Section Introduction
- Module Introduction
- How Authentication Works in Single-Page Applications (SPAs)
- Project Setup
- Adding User Sign-Up
- Adding User Sign-In (Login)
- Using Vuex to Send Auth Requests
- Storing Auth Data in Vuex
- Accessing Other Resources from Vuex
- Sending the Token to the Backend
- Protecting Routes (Auth Guard)
- Updating the UI State (Based on Authentication State)
- Adding User Logout
- Adding Auto Logout
- Adding Auto Login
- Wrap Up
-
Using - Preparations
-
Chapter 34 : Using and Creating Directives [VUE2]
Product information
- Title: Vue - The Complete Guide (Including Vue Router, Vuex, and Composition API)
- Author(s):
- Release date: April 2018
- Publisher(s): Packt Publishing
- ISBN: 9781788992817
You might also like
video
Complete Vue.js 3 (Inc. Composition API, Vue Router, Vuex)
This course is for developers who want to move fast. We cover the traditional way of …
video
React - The Complete Guide (Includes Hooks, React Router, and Redux) - Second Edition
**This course is now updated for React 18** Starting with an introduction to React concepts, you …
video
Kubernetes for the Absolute Beginners - Hands-On
Starting from the fundamental concept of containers, the course gradually unfolds into a comprehensive guide on …
video
Docker for the Absolute Beginner - Hands-On
Docker is an open platform for developers and sysadmins to build, deploy, and run distributed applications …