Home
EN - USD
Site language
Site currency
Vue - The Complete Guide (incl. Router & Composition API)
  • Home
  • Courses
  • Vue - The Complete Guide (incl. Router & Composition API)
Vue - The Complete Guide (incl. Router & Composition API)
0.00 (0)
Software Development / Web Development

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

Vue.js is an awesome JavaScript Framework for building Frontend Applications

Naomi Sipes
Naomi Sipes
6 Students enrolled
Intermediate
English
This course includes:
  • 38h 19m
  • 345 Lectures
  • 380 Downloadable assets
  • Full lifetime access
  • Access on Mobile and TV
  • Certificate on completion
$693.00

Overview

What will students learn in your course?
  • Build amazing Vue.js Applications - all the Way from Small and Simple Ones up to Large Enterprise-level Ones
  • Understand the Theory behind Vue.js and use it in Real Projects
  • Leverage Vue.js in both Multi- and Single-Page-Applications (MPAs and SPAs)
  • Learn the latest version of Vue (Vue 3), including the brand-new Composition API
What are the requirements or prerequisites for taking your course?
  • Students should have a fundamental understanding of HTML, CSS, and JavaScript, as Vue builds upon these technologies.
  • Familiarity with modern JavaScript features
  • A text editor like VS Code is recommended for writing and testing Vue applications.
  • While not mandatory, having Node.js and npm installed can help with Vue CLI and project setup.
  • A willingness to experiment and build projects is key to mastering Vue.js.
Who is the course for?
  • Anyone new to Vue who wants a step-by-step guide to mastering the framework.
  • Developers familiar with HTML, CSS, and JavaScript who want to add Vue.js to their skill set.
  • Those looking to transition from vanilla JavaScript or other frameworks (like React or Angular) to Vue.js.
  • Backend engineers who want to build dynamic frontends using Vue.js.
  • Those aiming to build full-stack applications with Vue.js as the frontend framework.
Description
Course tags

Course content

  • 29 Sections
  • 345 Lectures
  • 38h 19m Total length
Getting Started
1h 14m
12 Lectures

Getting Started

Welcome to the Course!
Preview 0:07:30
What is "Vue.js"?
Preview 0:07:30
Different Ways of Using Vue
Preview 0:06:54
Exploring Vue Alternatives
Preview 0:06:12
Building A First App With Just JavaScript
0:03:41
Join our Online Learning Community
0:06:12
Re-building the App with Vue
0:06:12
Vue vs "Vanilla JavaScript" (just JavaScript)
0:03:41
Setting Up the Course Development Environment
0:03:41
Course Outline & What's In The Course
0:09:13
How To Get The Most Out Of This Course
0:06:54
Module Resources
0:06:54
Module Introduction
0:07:30
Creating and Connecting Vue App Instances
0:07:30
Interpolation and Data Binding
0:03:41
Binding Attributes with the "v-bind" Directive
0:07:30
Understanding "methods" in Vue Apps
0:06:54
Working with Data inside of a Vue App
0:06:12
Outputting Raw HTML Content with v-html
0:07:30
A First Summary
0:03:41
Time to Practice: Data Binding
0:09:13
Understanding Event Binding
0:03:41
Events & Methods
0:06:12
Working with Event Arguments
0:03:41
Using the Native Event Object
0:06:54
Exploring Event Modifiers
0:07:30
Locking Content with v-once
0:06:12
Time to Practice: Event Binding
0:06:12
Data Binding + Event Binding = Two-Way Binding
0:06:54
Methods used for Data Binding: How It Works
0:09:13
Introducing Computed Properties
0:06:12
Working with Watchers
0:06:12
Methods vs Computed Properties vs Watchers
0:07:30
v-bind and v-on Shorthands
0:09:13
Time to Practice: Reactivity
0:07:30
Dynamic Styling with Inline Styles
0:07:30
Adding CSS Classes Dynamically
0:03:41
Classes & Computed Properties
0:06:54
Dynamic Classes: Array Syntax
0:06:12
Time to Practice: Dynamic Styling
0:09:13
Module Summary
0:07:30
Module Resources
0:03:41
Module Introduction
0:07:30
Understanding the Problem
0:09:13
Rendering Content Conditionally
0:07:30
v-if, v-else and v-else-if
0:06:12
Using v-show Instead Of v-if
0:06:12
Rendering Lists of Data
0:06:12
Diving Deeper Into v-for
0:07:30
Removing List Items
0:06:54
Lists & Keys
0:06:54
Time to Practice: Conditional Content & Lists
0:09:13
Module Summary
0:03:41
Module Resources
0:06:12
Module Introduction
0:09:13
Project Setup & First Methods
0:06:54
Updating the Health Bars
0:03:41
Adding a "Special Attack"
0:07:30
Adding a "Heal" Functionality
0:06:54
Adding a "Game Over" Screen
0:09:13
Finishing the Core Functionality
0:06:12
Adding a Battle Log
0:09:13
Module Resources
0:06:54
Module Introduction
0:07:30
An Introduction to Vue's Reactivity
0:09:13
Vue Reactivity: A Deep Dive
0:06:54
One App vs Multiple Apps
0:07:30
Understanding Templates
0:07:30
Working with Refs
0:06:12
How Vue Updates the DOM
0:03:41
Vue App Lifecycle - Theory
0:06:12
Vue App Lifecycle - Practice
0:03:41
Module Resources
0:03:41
Module Introduction
0:09:13
Understanding the Problem
0:03:41
Introducing Components
0:06:12
The Why: Building Complex User Interfaces With Components
0:06:54
Multiple Vue Apps vs Multiple Components
0:03:41
Module Resources
0:09:13
Module Introduction
0:06:12
Why We Need A Development Server
0:03:41
Why We Want A Better Developer Experience
0:09:13
Fixing npm run serve (Vue CLI)
0:06:54
Installing & Using the Vue CLI
0:07:30
Inspecting the Created Project
0:09:13
Inspecting the Vue Code & ".vue" Files
0:06:12
Adding the "Vetur" Extension to VS Code
0:03:41
More on ".vue" Files
0:03:41
A New Vue Project
0:06:54
Creating a Basic Vue App
0:03:41
Adding a Component
0:03:41
Adding Styling
0:06:12
A Small Addition
0:06:12
An Alternative Setup - using "npm init" & Volar
0:07:30
Module Resources
0:03:41
Module Introduction
0:09:13
Introducing "Props" (Parent => Child Communication)
0:03:41
Prop Behavior & Changing Props
0:09:13
Validating Props
0:03:41
Supported Prop Values
0:06:54
Working with Dynamic Prop Values
0:07:30
Emitting Custom Events (Child => Parent Communication)
0:03:41
Defining & Validating Custom Events
0:07:30
Prop / Event Fallthrough & Binding All Props
0:06:12
Demo: Adding Components & Connecting Them
0:07:30
Demo: Adding More Component Communication
0:03:41
Time to Practice: Props & Custom Events
0:07:30
A Potential Problem
0:06:12
Provide + Inject To The Rescue
0:07:30
Provide + Inject for Functions / Methods
0:09:13
Provide + Inject vs Props & Custom Events
0:03:41
Module Summary
0:06:54
Module Resources
0:09:13
Module Introduction
0:06:12
Project Setup
0:07:30
Global vs Local Components
0:09:13
Scoped Styles
0:06:54
Introducing Slots
0:06:12
Named Slots
0:09:13
Slot Styles & Compilation
0:07:30
More on Slots
0:06:54
Scoped Slots
0:06:12
Dynamic Components
0:07:30
Keeping Dynamic Components Alive
0:06:54
Applying What We Know & A Problem
0:07:30
Teleporting Elements
0:09:13
Working with Fragments
0:03:41
The Vue Style Guide
0:03:41
Moving to a Different Folder Structure
0:06:12
Module Summary
0:07:30
Module Resources
0:09:13
Module Introduction
0:06:54
Setup & First Steps
0:09:13
First Components & Props
0:07:30
Styling and More Components
0:09:13
Header & BaseCard Components
0:03:41
Adding a Base Button
0:06:54
Dynamic Components & Attribute Fallthrough
0:03:41
Adding & Styling Tabs
0:07:30
Adding a Form
0:09:13
Fetching User Input
0:06:12
Adding a Modal Dialog
0:06:54
Deleting Items
0:07:30
Adding "Teleport"
0:06:54
Module Resources
0:09:13
Module Introduction
0:07:30
v-model & Inputs
0:07:30
Working with v-model Modifiers and Numbers
0:07:30
v-model and Dropdowns
0:07:30
Using v-model with Checkboxes & Radiobuttons
0:03:41
Adding Basic Form Validation
0:09:13
Building a Custom Control Component
0:07:30
Using v-model on Custom Components
0:09:13
Module Summary
0:03:41
Module Resources
0:09:13
Module Introduction
0:09:13
Starting App & Why we need a Backend
0:06:54
Adding a Backend
0:06:54
How To (Not) Send Http Requests
0:06:12
Sending a POST Request to Store Data
0:03:41
Http Requests & Http Methods (Verbs)
0:09:13
Using Axios Instead Of "fetch()"
0:07:30
Getting Data (GET Request) & Transforming Response Data
0:06:12
Loading Data When a Component Mounts
0:06:54
Showing a "Loading..." Message
0:07:30
Handling the "No Data" State
0:09:13
Handling Technical / Browser-side Errors
0:07:30
Handling Error Responses
0:03:41
Module Summary
0:06:12
Module Resources
0:03:41
Module Introduction
0:06:12
What & Why?
0:07:30
Routing Setup
0:09:13
Registering & Rendering Routes
0:03:41
Navigating with router-link
0:09:13
Styling Active Links
0:06:54
Programmatic Navigation
0:06:54
Passing Data with Route Params (Dynamic Segments)
0:07:30
Navigation & Dynamic Paths
0:03:41
A Vue Bug
0:03:41
Updating Params Data with Watchers
0:09:13
Passing Params as Props
0:09:13
Redirecting & "Catch All" Routes
0:06:12
Using Nested Routes
0:03:41
More Fun with Named Routes & Location Objects
0:07:30
Using Query Params
0:06:12
Rendering Multiple Routes with Named Router Views
0:06:54
Controlling Scroll Behavior
0:03:41
Introducing Navigation Guards
0:06:12
Diving Deeper Into Navigation Guards
0:07:30
The Global "afterEach" Guard
0:03:41
Beyond Entering: Route Leave Guards
0:07:30
Utilizing Route Metadata
0:07:30
Organizing Route Files
0:09:13
Summary
0:03:41
Module Resources
0:03:41
Module Introduction
0:07:30
Animation Basics & CSS Transitions
0:09:13
Understanding CSS Animations
0:09:13
Why Is "Just CSS" Not Enough?
0:03:41
Playing CSS Animations with Vue's Help
0:06:54
Using the Transition Component
0:06:54
CSS Animations with the Transition Component
0:09:13
Using Custom CSS Class Names
0:03:41
Example: Animating a Modal
0:06:54
Transitioning Between Multiple Elements
0:09:13
Using Transition Events
0:07:30
Building JavaScript Transitions (instead of CSS)
0:06:12
Disabling CSS Transitions
0:07:30
Getting Started with Animated Lists
0:07:30
Animating Lists with "transition-group"
0:06:12
Animate List Item Movement
0:06:54
Animating Route Changes
0:06:12
An Important Note on Animated Route Changes
0:06:54
Module Resources
0:06:54
Module Introduction
0:06:12
What & Why?
0:09:13
Creating & Using a Store
0:09:13
Connecting Components to State
0:06:12
Introducing Mutations - A Better Way of Changing Data
0:06:12
Passing Data to Mutations with Payloads
0:09:13
Introducing Getters - A Better Way Of Getting Data
0:06:54
Running Async Code with Actions
0:09:13
Understanding the Action "Context"
0:03:41
Using Mapper Helpers
0:07:30
Example: Adding More State
0:07:30
Organizing your Store with Modules
0:03:41
Understanding Local Module State
0:09:13
Namespacing Modules
0:09:13
Structuring Vuex Code & Files
0:03:41
A Challenge!
0:09:13
Challenge Solution (1/3)
0:03:41
Challenge Solution (2/3)
0:06:12
Challenge Solution (3/3)
0:09:13
Summary
0:07:30
Module Resources
0:03:41
Module Introduction
0:06:54
Planning the Project / Web App
0:06:12
Planning the Data Requirements
0:03:41
Planning the Layout / Components
0:07:30
Registering Routes
0:07:30
Adding Route Page Components
0:06:54
Working on the Main Layout & Styling
0:07:30
Wiring Up Pages
0:06:12
Adding Vuex and Coach Data
0:07:30
Working on the Coaches List and List Items
0:06:54
Adding a Couple of Base Components (Base Card, Base Button, Base Badge)
0:07:30
Building the Coach Detail Component
0:06:12
Filtering Coaches
0:07:30
Registering as a Coach: The Form
0:06:12
Adding Coaches to Vuex
0:06:12
Adding Form Validation
0:07:30
Working on the Contact Form
0:06:54
Storing Requests (Messages) With Vuex
0:03:41
Outputting Incoming Requests (Messages)
0:06:54
Filtering Requests for the Active Coach
0:07:30
Sending a PUT Http Request to Store Coach Data
0:07:30
Fetching Coach Data (GET Http Request)
0:06:12
Rendering a Loading Spinner
0:03:41
Adding Http Error Handling
0:06:12
Sending Coaching Requests Http Requests
0:09:13
Caching Http Response Data
0:09:13
Adding Route Transitions
0:07:30
The "Not Found" Page & Summary
0:07:30
Module Resources
0:06:12
Module Introduction
0:09:13
How Authentication Works in Vue Apps (or any SPA)
0:06:54
Locking / Protecting Backend Resources
0:06:54
Adding an Authentication Page (Login & Signup)
0:06:54
Preparing Vuex
0:06:12
Adding a "Signup" Action & Flow
0:07:30
Better UX: Loading Spinner & Error Handling
0:03:41
Adding a "Login" Action & Flow
0:06:54
Attaching the Token to Outgoing Requests
0:06:54
Updating the UI Based on Auth State
0:07:30
Adding a "Logout" Action & Flow
0:09:13
Authentication & Routing (incl. Navigation Guards)
0:09:13
Adding "Auto Login"
0:06:12
Adding "Auto Logout"
0:06:54
Summary
0:09:13
Module Resources
0:03:41
Module Introduction
0:03:41
What To Deploy?
0:06:54
Optimization: Using Asynchronous Components
0:07:30
Note: Async Components & Routing
0:03:41
Building the Project For Production
0:07:30
Deploying a Vue App
0:03:41
Module Resources
0:07:30
Module Introduction
0:06:12
Which Problem Does The Composition API Solve?
0:06:12
Replacing "data" with "refs"
0:06:12
Replacing the setup() Method
0:06:54
Building "reactive" Objects
0:09:13
Reactivity: A Deep Dive
0:03:41
Replacing "methods" with Regular Functions
0:06:54
Time to Practice: Data & Functions
0:06:12
Replacing "Computed Properties" with the "computed" Function
0:07:30
Two-Way-Binding and the Composition API
0:03:41
Working with Watchers
0:09:13
Time to Practice: Composition API Core Building Blocks
0:06:54
A First Summary
0:06:54
How To Use Template Refs
0:09:13
Components, Props & The Composition API
0:03:41
Emitting Custom Events
0:06:12
Working with Provide/ Inject
0:09:13
Lifecycle Hooks in the Composition API
0:07:30
Migrating from Options API to Composition API - An Example Project
0:09:13
Migrating a First Component
0:07:30
Migrating a Big Component
0:07:30
Migrating the Remaining Components
0:06:12
Routing, Params & The Composition API
0:03:41
The Route & Router Objects and the Composition API
0:06:12
Using Vuex with the Composition API
0:06:12
Summary
0:09:13
Module Resources
0:06:12
Module Introduction
0:06:54
Reusability Concepts
0:06:12
Using Mixins
0:06:54
Understanding Mixin Merging
0:03:41
Global Mixins
0:06:54
Disadvantages of Mixins
0:06:12
Custom Hooks / Composables & The Composition API
0:03:41
More Custom Composition Functions
0:03:41
Why Hooks / Composables Beat Mixins
0:09:13
Example: Creating a "Search" Hook
0:09:13
Custom Hooks Gotchas
0:06:54
More Thoughts on Custom Hooks / Composables
0:07:30
Example: A Custom "Sort" Hook
0:06:54
Module Resources
0:09:13
Thanks for being part of the course!
0:06:12
Course Roundup & Next Steps
0:06:54
Vue 3 - Overview
0:03:41
Important Changes & Migration Steps
0:09:13
Vue 3: New Features
0:03:41
The New Composition API (Optional!)
0:06:12
Further Migration Resources
0:03:41
Vue 2 Course Content
0:06:54
Time to Practice - Outputting Data to Templates
0:03:41
Time to Practice - Events
0:06:12
Time to Practice - Reactive Properties
0:09:13
Time to Practice - Styling
0:07:30
Time to Practice - Conditionals & Lists
0:03:41
Time to Practice - Components
0:03:41
Time to Practice - Component Communication
0:06:54
Bonus: More Content!
0:03:41

About tutor

Naomi Sipes
4.20 (10)

Naomi Sipes

Courses 1

Hello All! I'm Naomi Sipes and I began my work as a banker, but my strong desire to teach languages led me to change careers. I've taught multiple languages like German, Hebrew, Finnish. I have a Cambridge University Certificate in Language Teaching. A language school, in my mind, is an enriching interaction of individuals that builds mutual love and acceptance of differences in society.

View profile
The website uses cookies to provide the best user experience while browsing safely. You can read more about cookies in the Privacy Policy. Cookies policy
Accept cookies Choose cookies