A premium training course to teach you all about Vue 3, especially designed for beginners to help build various user interfaces.
About This Video
In Detail
Vue is a JavaScript framework to build user interfaces and single-page applications. …
A premium training course to teach you all about Vue 3, especially designed for beginners to help build various user interfaces.
About This Video
In Detail
Vue is a JavaScript framework to build user interfaces and single-page applications. This course is focused on the latest version of Vue 3, its important features, and working on 4 projects to implement the skills learned.
Personal portfolio/blog project:
This project strips away the complexities/build tools and focuses purely on Vue.js.
Taking a simple HTML file, we add the Vue library to not only learn the core features but also to see how easily we can add it to an existing website.
Countdown app:
Once you have a solid grounding, it is time for project 2. This is an event countdown app that introduces you to a more sophisticated setup using the Vue CLI.
While building the project, you will learn so much more, including watchers, computed properties, forms, conditional rendering, and teleport, to name a few.
Dashboard app:
Project 3 is a dashboard application with multiple pages, making use of dynamic components.
We will discover different ways of passing data in Vue.js, including provide/inject and the different types of slots available.
Creative cards app:
The last project is a card editing application. You will begin with a library of greeting cards the user can select, and then once chosen, an edit screen will allow the user to edit the text, images, and overall styling as well.
This project will introduce the new Vue 3 Composition API, how to organize your code into reusable files, routing, lazy loading, cloud functions, image uploading, and using a database.
By the end of this course, you will have already built 4 projects and learned all of the essential Vue skills, along with the new Vue.js 3 features and syntax.
Chapter 1 : Getting to Know Vue
Introduction
What You will Need for this Course
What is Vue.js and What can it Do?
Overview of Vue 3 Changes
Project Source Code
Chapter 2 : First Look at Vue.js
Section Introduction
The Vue Instance
Data and Lists
Looping with Objects
List Indexes and Keys
Binding Attributes
Mini Challenge-Dynamic Links
Mini Challenge-Dynamic Links-Solution
JavaScript Expressions
Event Handling
Methods
Raw HTML
The Vue Life Cycle
Chapter 3 : Component Basics
Section Introduction
What are Components?
First Look at Components
Props and Reusing Components
Local Components
Chapter 4 : Build Tools and Single-Page Applications
Section Introduction
Single-Page Applications
The Vue CLI
Project Structure
The vetur Extension
Chapter 5 : Countdown Project
Section Introduction
Starter Project Download
Single File Components
Making Our Components Dynamic
Calculating Days Left
Conditional Rendering
More on Conditional Rendering
Computed Properties
Watchers
Computed or Watchers
Ordering and Toggling Past Events
Teleport
Chapter 6 : Forms, Events, and Modifiers
Section Introduction
Our Form Component
Styling and Positioning the Form Modal
Emit Custom Events
Binding Form Inputs
Emit Data with a Custom Event
Emit Multiple Events
Modifiers
Validating Our Form
Updating Events
Removing Events
Chapter 7 : Validation and a Deeper Look at Props
Section Introduction
Prop Validation
Non-Prop Attributes
More on Non-Prop Attributes
Chapter 8 : Slots and Dynamic Components
Section Introduction
What We will be Building
Project Pages and Components
Introduction to Slots
Overview Page Structure
Slots in Practice
Passing Dynamic Data and Scope
Fallback Content
Named Slots
Scoped Slots
Orders Page
Bestsellers Page
Dynamic Components
Chapter 9 : Provide/Inject
Section Introduction
What is provide-inject
Setting Up a Provider
Injecting Data
Mini Challenge - Update Orders - Bestsellers Pages
Update Orders and Bestsellers Pages to Use Provide
Updating the Provider from a Child Component
Chapter 10 : Introduction to Routing
Section Introduction
What We will be Building and Project Starter
Setting Up the Vue Router
Router Link and Router View
Params and Queries
Matching Dynamic Routes
Nested Routes
Active Classes
Fallback Pages
Setting Up Our Project Components and Routes
Programmatic Navigation
Different Router Modes
Chapter 11 : Composition API
Section Introduction
What is the Composition API
Composition Setup
Primitive Versus Reference Types
Quick Introduction to Proxies
Using Reactive and isReactive
Adding Reactivity with Ref
Destructuring and toRefs
Readonly
Computed
Standalone Composition Functions
Mini Challenge-Moving Over the Cards by Category
Moving Over the Cards by Category
Accessing the Router
Watch and WatchEffect
Using Alongside the Options API
Chapter 12 : Pushing On with Our Project
Section Introduction
Linking to Selected Card and Category Styling
The Create View
Retrieving the Selected Card
Selecting the Current Page
Switching Card Pages
The Card Preview Component
Text Output Component
Card Edit Component
Text Input Component and Hover Menu
Adding Menu Options
Menu Options Continued
Menu Styling
Updating the Card
Adding New Sections
Removing Sections
Rearranging the Order of Sections
Changing the Section Height
Additional Styling
Provide and Inject with Composition
Chapter 13 : Navigation Guards and Lazy Loading
Section Introduction
Navigation Guards
Lazy Loading Routes
Grouping Routes into Chunks
Chapter 14 : Uploading Images
Section Introduction
Image Upload Component
Setting Up Cloudinary
Reading File Objects and Previewing
Uploading the Image File
Saving the Image URL to Our Card
Repositioning the Image
Removing Images
Chapter 15 : Deployment
Deployment to Netlify
Thank You