~ In-Depth Vue 3 For Beginners ~

vue.js logo
Buy course - $59

Immerse yourself in this amazing developer-friendly framework for building user interfaces!

In-Depth Vue 3 For Beginners is a premium training course to teach you all about Vue 3.

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.

  • ✔ ~11 hrs HD Video Content
  • ✔ 137 Videos
  • ✔ English Captions
  • ✔ Clear Audio
  • ✔ 4 Projects
  • ✔ Beginner Friendly
  • ✔Source Code At Each Stage

What You Will Build 🔥

course portfolio image

Personal portfolio/blog project

This project strips away all of the complexities/build tools etc 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 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.

course countdown project image
course dashboard image

Dashboard App

Project 3 is a dashboard application with multiple pages, making use of dynamic components.

We 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. 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, cloud functions, image uploading, and using a database.

creative cards project image

Course structure

#1 Getting To Know Vue

  • Welcome To The Course!
  • What You Will Need For This Course
  • What Is Vue.js & What Can It Do?
  • Overview of Vue 3 changes
  • Project Source Code

#2 First Look At Vue

  • 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

#3 Component Basics

  • What Are Components?
  • First Look At Components
  • Props & Re-Using Components
  • Local Components

#4 Build Tools & Single Page Applications

  • Single Page Applications
  • The Vue CLI
  • Project Structure
  • The Vetur Extension

#5 Vue 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
  • Computed or Watchers?
  • Ordering & Toggling Past Events
  • Teleport

#6 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

#7 Validation & A Deeper Look At Props

  • Prop Validation
  • Non Prop Attributes
  • More On Non Prop Attributes

#8 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

#9 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

#10 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

#11 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

#12 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

#13 Navigation Guards & Lazy Loading

  • Navigation Guards
  • Lazy Loading Routes
  • Grouping Routes Into Chunks

#14 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

#15 Deployment

  • Deployment To Netlify

Who is this for?

Web Dev beginner?

This course is beginner friendly, but if you have little / zero web dev experience, I recommend you learn some basics first.

HTML, CSS, with a little Javascript will give you a good foundation.

New to Vue.js?

Never used Vue before? No problem, this course will guide you from the first steps to a competent Vue.js developer.

Vue is a great starting point in the world of front end frameworks / libraries and will build on your existing HTML,CSS & Javascript skills.

Vue.js ninja??

Probably not for you unless you want to get up to speed on the latest Vue 3 features.

Or just want a course to go through and try out some new projects.

Questions?

  • How do I take the course?

    The course is video format. Sign up, and follow along with the videos!

  • How long do I have to take course?

    This video course is self-paced, no timescale to finish!

  • I do things a different way to you, why does your way suck?

    There is usually many ways to do things in coding. This is just my way. Have a different approach? Great!

  • Why Vue?

    Vue is awesome 😀 It is easy to get going with (as far as JS frameworks go). Fast, performant, scalable and enjoyable for developers.

  • What can I do with the projects?

    The projects are yours to share, put in a portfolio, add to GitHub etc. Only restriction is please do not use to create your own training course.

  • What if I am not happy with the course?

    No probs. Even though I have spend hundreds of hours creating this course, I understand everybody learns differently. If my style is not for you, message me for a full refund. info@chrisdixon.dev

  • Student Discount, Teams, Anything Else?

    Get in touch, I will do my best to help. info@chrisdixon.dev

Who is behind the course?

Chris Dixon image

Hey, I'm Chris

I am a web developer from the UK.

I love coding, teaching others how to code & spicy food.

chrisdixon.dev ~ @chrisdixon161