Autoplay
Autocomplete
Previous Lesson
Complete and Continue
LEARN VUEJS 3 VUE ROUTER AND VUEX STATE MANAGEMENT DARIJA
Overview
Introduction (3:00)
Prerequisite (1:31)
Tools & Extensions (4:20)
Telegram Group
Make Money (6:10)
Basics of VueJS
Integrate VueJS 3 (4:57)
Instance VueJS 3 (4:29)
Data Interpellation (4:07)
Data & Methods (4:38)
Data Binding (7:49)
Events in VueJS (7:18)
Events Modifiers (5:06)
Keys Events (6:17)
Two Way DataBinding v-model (2:53)
Computed Propertie (7:57)
Watch Propertie (4:01)
Class Binding (13:01)
Style Binding (4:39)
Conditional Rendering (5:35)
List Rendering (5:10)
Vue CLI 4
Install & Generate New Project (4:43)
scaffolding Vue 3 (6:47)
Understand Templating (3:04)
$refs Property (4:27)
Add Bootstrap (2:38)
Multiple Components (16:55)
Global & Scoped Style (5:33)
Props Input Parent To Child (11:37)
Props Output Child To Parent (8:46)
Content "SLOT" (9:19)
Implementing Add Course (11:42)
Exercice (1:06)
Solution (6:00)
Teleport with Vue 3 (10:28)
Handle Forms
Two-Way DataBinding (4:27)
Select Field Binding (7:41)
Radio Field Binding (4:37)
Checkbox Field Binding (6:15)
Submitting the Form (4:25)
Exercice (1:38)
Solution (8:36)
Source Code
Vue Router Navigation
New Project With Router (2:28)
Router Structure (8:59)
Router Link (5:16)
Add Bootswatch (5:39)
Router Name (6:29)
Route Parameters (8:40)
Dynamic Links (5:36)
Props in Routes (3:29)
Redirect & Page Not Found (4:55)
Router Link Active (4:35)
Navigability With go & push (5:30)
Fetching Data
Install a Json Server (7:18)
Retreive All Posts "Mounted" (4:46)
Retreive One Post (5:43)
Best Practice (5:25)
Source Code
Project #1 (Vue 3 + JSON SERVER)
One Post Template (8:14)
Delete One Post (6:24)
Create a Post Form (9:26)
Adding New Post (5:40)
Edit Post Form (7:11)
Update One Post (7:30)
Source Code
Composition API
Overview & Setup (4:40)
Data & Methods (7:11)
Ref in Setup Function (6:57)
Data Reactive in Setup (7:07)
Using Ref or Reactive (5:06)
Computed in Setup Function (7:12)
Watch and WatchEffect (6:26)
Props in the Setup Function (10:07)
Life Cycle Hooks (8:02)
Using useRouter (Navigability) (5:26)
Using useRoute (Params) (3:56)
Source Code
Project #2 (Vue 3 + firebase)
Overview Firebase (4:06)
Connecting Vue 3 with Firebase (4:57)
Firestore Collections & Documents (4:46)
Getting Data from Collection (6:41)
Separate Code with Composable (6:13)
Getting One Post (Document) (12:50)
Use Throw Error for Catch error (3:59)
Form to Create Post (6:39)
Add a Document Inside a Collection (6:06)
Delete a Document from Collection (5:30)
Real Time Mode with Firestore (5:31)
Building & Deploying
Firebase CLI (4:15)
Build Your Project (2:41)
Deploy Your Project (1:41)
Redeploying & Rollback (3:25)
Source Code
VUEX State Managment
Overview VueX (8:22)
Create & Using Store (5:51)
Bindding Component to State (6:48)
Apply Mutations To State (7:21)
Passing Data to Mutation (payload) (5:21)
Retreive State with Getters (8:54)
Running Mutations with Action (5:16)
Understanding Context inside the Action (2:59)
mapGetters & mapActions Helpers (8:30)
Handling Store with Modules (8:06)
Namespace On Module (6:01)
structure your code in Vuex like a Pro (10:24)
Source Code
SPA LARAVEL JWT VUE 3 & VUEX
Installing Laravel + JWT (8:53)
Understand & Handling Api JWT (12:17)
Fresh Project with Vue CLI (6:12)
Pages & Component Scaffolding (12:22)
Sending Client Request to API with Axios (7:51)
Default Base URL with Axios (4:05)
Authentication & Vuex (15:40)
Current User Authenticated (7:25)
Vuex Subscriber & Axios Header (13:22)
LocalStorage & Re-authenticating (11:03)
Preventing Flickering (4:08)
Middleware with beforeEnter Hook (5:55)
SignOut (5:59)
Source Code
Conclusion
Resources (6:50)
Bonus
Tools & Extensions
Mentioned extensions:
Vertur
Vue 3 Snippets
npm Intellisense
Path Intellisense
Auto Close Tag
Bracket Pair Colorizer
Highlight Matching Tag
Live Server
Complete and Continue
Discussion
0
comments
Load more
0 comments