In Depth Vue 3 For Beginners

Project starter files, source code, and stages:

https://github.com/chrisdixon161/vue-3-course

Vue 3 is here! Immerse yourself in this amazing developer-friendly framework for building user interfaces!

Together we explore everything Vue.js has to offer from the ground up, all while building 4 projects to put your knowledge into practice. You will learn all of the essential Vue skills, along with the new Vue.js 3 features and syntax.

We start off very beginner-friendly, building on your existing HTML & CSS skills by introducing Vue.js to an existing HTML project, implementing the features gradually. You will learn all of the essential Vue skills and syntax while building our first project, where we add a blog to a portfolio website.

You will learn all the essentials such as data, methods, looping, events, and lifecycle hooks before moving onto the different types of components available, and how to pass data to them.

Once we 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.

Project 3 will be a user dashboard that teaches you all about slots, dynamic components and using provide/inject.

The last project is a card editing application. We 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 too. This project will introduce the new Vue 3 Composition API, how to organize your code into re-usable files, routing, lazy loading, image uploading, reactivity, deployment, and so much more.

This course will give you a solid understanding of Vue.js 3, along with learning core Javascript too.

• Welcome To The Class!
• What You Will Need For This Course
• Share Your Work On Skillshare!
• What Is Vue.js & What Can It Do?
• Overview of Vue 3 changes
• Project Source Code
• Section Intro- First Look At Vue.js
• The Vue Instance
• Data & Lists
• Looping With Objects
• List Indexes & Keys
• Binding Attributes
• Mini Challenge- Dynamic Links
• Dynamic Links: My Solution
• Javascript Expressions
• Event Handling
• Methods
• Raw HTML
• Vue Lifecycle
• Section Intro- Component Basics
• What Are Components?
• First Look At Components
• Props & Re-Using Components
• Local Components
• Section Intro- Build Tools & Single Page Applications
• Single Page Applications
• The Vue CLI
• Project Structure
• The Vetur Extension
• Section Intro- Countdown Project
• Starter Project Download
• Single File Components
• Making Our Events Dynamic
• Calculating Days Left
• Conditional Rendering
• More on conditional rendering
• Computed Properties
• Watchers & Multiple Root Nodes (fragments)
• Computed or Watchers?
• Ordering & Toggling Past Events
• Teleport
• Section Intro- Forms, Events & Modifiers
• Our Form Component
• Styling & 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 & Stop Propagation
• Section Intro- Validation & A Deeper Look At Props
• Prop Validation
• Non Prop Attributes
• More On Non Prop Attributes
• Section Intro-Slots & Dynamic Components
• What We Will Be Building & Starter Project
• Project Pages & Components
• Introduction To Slots
• Overview Page Structure
• Slots In Practice
• Passing Dynamic Data & Scope
• Fallback Content
• Named Slots
• Scoped Slots
• Orders Page
• Best Sellers Page
• Dynamic Components
• Section Intro- Provide / Inject
• What Is Provide / Inject?
• Setting Up a Provider
• Injecting Data
• Mini Challenge: Update Orders & Best Sellers Pages To Use Provide / Inject
• Update Orders & Best Sellers Pages To Use Provide / Inject
• Updating the Provider From a Child Component
• Section Intro- Introduction To Routing
• What We Will Be Building & Starter Project
• Setting Up The Vue Router
• Router link and router view
• Params & Queries
• Matching Dynamic Routes
• Nested Routes
• Active classes
• Fallback Pages
• Setting Up Our Project Components & Routes
• Programmatic Navigation
• Different Router Modes
• Section Intro- Composition API
• What Is The Composition API?
• Composition Setup
• Primitive vs Reference Types
• Quick Introduction To Proxies
• Using Reactive & isReactive
• Adding Reactivity With Ref
• Destructuring & 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
• Section Intro- Pushing On With Our Project
• Linking To Selected Card & 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 & 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 & Inject With Composition
• Section Intro- Navigation Guards & Lazy Loading
• Navigation Guards
• Lazy Loading Routes
• Grouping Routes Into Chunks
• Section Intro- Uploading Images
• Image Upload Component
• Setting Up Cloudinary
• Reading File Objects & Previewing
• Uploading The Image File
• Saving The Image URL To Our Card
• Repositioning The Image
• Removing Images
• Deployment To Netlify
• Thank You!