Leela Web Dev
1. Introduction to VueJS 3.0. New Features and Breaking Changes added in the Vue 3.0.
Leela Web Dev
2. Breaking Changes need to know while migrating code from Vue2 to Vue 3.
Leela Web Dev
3. Create Vue App Instance & connect to the element. Implement Data binding & Interpolation - Vue 3
Leela Web Dev
4. Binding the html element attributes with v-bind Directive in Vue 3
Leela Web Dev
5. Implement Methods, use Data Properties inside methods, understand v-html directive in Vuejs.
Leela Web Dev
6. Understanding Vuejs Click Event Binding using v-on Directive - Vue3 | Vue.js
Leela Web Dev
7. Access the Native Event Object $event in the event handling Methods in Vue3 | Vue js
Leela Web Dev
8. Use of Event Modifiers like mouse right-click, Prevent default & stop Propagation - Vue3 | Vue js
Leela Web Dev
9.use of Key Event Modifiers (enter, esc, ctrl, shift keys) and v-once directive in Vue3 | Vue js
Leela Web Dev
10. v-model Directive for achieving Two way data binding in Vuejs - Vue3
Leela Web Dev
11. Computed Properties in Vue 3 - Vue js
Leela Web Dev
12. Understanding Watchers in Vuejs | Vue3
Leela Web Dev
13. Apply Dynamic styling with inline Styles in Vuejs | Vue 3.
Leela Web Dev
14. Adding CSS Classes dynamically in Vuejs - Vue 3
Leela Web Dev
15. Use Computed properties for dynamic classes. Array Syntax for dynamic Classes in Vue js | Vue3
Leela Web Dev
16. Rendering Content Conditionally using V-if directive in Vuejs | Vue3
Leela Web Dev
17. Using v-if, v-else, v-else-if directives. Difference on v-if and v-show directive - Vuejs | Vue3
Leela Web Dev
18. Using v-for directive to render the list. Loop Arrays, Objects & number range in Vue js | Vue3
Leela Web Dev
19. Importance of Key attribute usage in the v-for directive in Vue js | Vue3
Leela Web Dev
20. One App vs Multiple App instances. Sharing data between two Vue app instances - Vue js | Vue3
Leela Web Dev
21. Using $Refs & ref attribute to access DOM nodes for referencing Html Elements in Vue js | Vue 3
Leela Web Dev
22. Life Cycle Hooks Events explanation in Vue js | Vue 3.
Leela Web Dev
23. Practice Life Cycle Hooks like created, mounted, updated and unmounted events in Vue js | Vue 3
Leela Web Dev
24. Why we need to use components in Vue js. Basic introduction to Components in Vue js | Vue 3
Leela Web Dev
25. Different ways of registering components. Name Casing components in Pascal Case in Vue js | Vue3
Leela Web Dev
26. Introduction to Vue CLI. Create a Vue project using the Vue CLI approach in Vue js | Vue 3
Leela Web Dev
27. Exploring Project Structure created by Vue CLI. Understand ".vue" file Contents - Vue js | Vue 3
Leela Web Dev
28. Create basic ".vue" component and register it both Locally and globally in Vue js | Vue 3
Leela Web Dev
29. Perform Parent to Child Communication using this Props in Vuejs | Vue 3
Leela Web Dev
30. Prop Validation with Type Checks and Prop Casing (Camel Case) in Vue js | Vue 3
Leela Web Dev
31. Non Prop Attributes and Attribute Inheritance. Disable inheritance, $attrs variable in Vue js 3.
Leela Web Dev
32. Child - Parent Communication using the $emit to send the Custom Events - Vue js | Vue 3
Leela Web Dev
33. Apply Validation for the emitted custom events in Vue js | Vue 3.
Leela Web Dev
34. Provide / Inject for parent-child communication. Apply reactivity for provide values - Vue 3
Leela Web Dev
35. Apply Provide - Inject for the Custom Event Methods. Props Vs Provide in Vue js | Vue 3
Leela Web Dev
36. Component based Scoped CSS Styles in Vue js | Vue 3
Leela Web Dev
37. Introduction to Slots. Difference between Slots Vs Props and when to use in Vue js | Vue 3
Leela Web Dev
38. Named Slots in Vue js. Define multiple slots with names in Vue 3
Leela Web Dev
39. Fallback Content in Slots. Use of $slots variable and Named Slots Shorthand in Vue js | Vue 3
Leela Web Dev
40. Scoped Slots in Vue js. Pass Data from slots as props and access in the components in Vue 3.
Leela Web Dev
41. Dynamic Components in Vue js. Keep the components alive by using keep-alive in Vue js | Vue 3
Leela Web Dev
42. Async Components in Vue js . Assign Name for the chunks using webpackchunkname in Vuejs | Vue 3
Leela Web Dev
43. Teleport in Vue 3. Using Teleport for Modal and Notifications in Vue js | Vue 3
Leela Web Dev
44. Send Http Post Request using axios in Vue js | Vue 3.
Leela Web Dev
45. Send HTTP Get Request using Axios in Vue js | Vue 3
Leela Web Dev
46. Apply Global Axios Default Config like baseURL, headers for sending HTTP Requests - Vue 3
Leela Web Dev
47. Axios Interceptors for request & response. Create custom axios instance in Vue js | Vue 3.
Leela Web Dev
48. Implement Vuejs Routing setup using Vue Router in Vue js | Vue 3
Leela Web Dev
49. Navigate with router-link. styling the active links. Changing to custom class in Vue js | Vue 3
Leela Web Dev
50. Programmatic navigation between pages using $router with push, replace and go in Vue js | Vue 3
Leela Web Dev
51. Create Posts and List the Posts data using axios in the Vue router - Vue js | Vue 3.
Leela Web Dev
52. Pass Data with Route Params for Navigation using $route.params in Vue js | Vue 3.
Leela Web Dev
53. React to Route Param Changes on the same page using watchers, $watch, and props - Vue js | Vue 3
Leela Web Dev
54. Redirect & alias routing differences. Catch-All / 404 Not Found Route in Vue js | Vue 3.
Leela Web Dev
55. Implement Nested Routes using Children Option. Add Default children route in Vue js | Vue 3.
Leela Web Dev
56. Benefits of Named Routes in Routing. Accessing Query Parameters using $route in Vue js | Vue 3.
Leela Web Dev
57. Multiple Router based Named Views for router-view in Vue js | Vue 3.
Leela Web Dev
58. Global router before Each Navigation Guard in Vue js | Vue 3.
Leela Web Dev
59. Router & Component Based Navigation Guards. beforeEnter, beforeRouteLeave - Vue 3 | Vue js
Leela Web Dev
60. beforeRouteUpdate Guard. Use Component instance "this" inside beforeRouteEnter Vue js | Vue 3
Leela Web Dev
61. Implement Class based Animations and Transitions in Vue js | Vue 3.
Leela Web Dev
62. Enter & Leave Transitions for dynamically inserted component using transition component - Vue 3
Leela Web Dev
63. Apply Key-frames animations for the Transition Wrapper component in Vue 3 | Vue js.
Leela Web Dev
64. Apply Animation for Dialog Modal Component on opening & Closing with Transition - Vue js | Vue 3
Leela Web Dev
65. Transition Modes out-in and in-out for applying animations in Vue js | Vue 3
Leela Web Dev
66. Implement Javascript Hooks / Events for the Transitions of leave and enter in Vue js | Vue 3.
Leela Web Dev
67. Practical Implementation of Javascript Events / Hooks for Transitions in Vue js | Vue 3.
Leela Web Dev
68. Apply Transition to the Lists of data for dynamic adding and removing elements - Vue js | Vue 3.
Leela Web Dev
69. Implement transition-group for the lists of data and the tag attribute in the Vue js | Vue 3.
Leela Web Dev
70. Understand List move class in the transition group for the list of data in Vue js | Vue 3.
Leela Web Dev
71. Implement the Route based Transitions when navigating from one page to another - Vue js | Vue 3.
Leela Web Dev
72. Introduction to Vuex state management. Install vuex and create store in Vue js | Vue 3.
Leela Web Dev
73.Get the store data using computed properties. Update the state in store in Vuex - Vue js | Vue 3
Leela Web Dev
74. Implement Mutations to set state in Vuex store. Access mutations with commit - Vue js | Vue 3.
Leela Web Dev
75. Introduction to Getters to get the state data in Vuex store - Vue js | Vue 3.
Leela Web Dev
76. Calling Getters inside another Getter Methods. Pass arguments to getters, Vuex - Vue js | Vue3.
Leela Web Dev
77. Use Actions to run Asynchronous code in Vuex. Role of context in Actions, Vuex - Vue js | Vue 3.
Leela Web Dev
78. Dispatching Actions within another actions in Vuex - Vue js | Vue 3.
Leela Web Dev
79. Understand mapGetters, mapState, mapMutations and mapActions for Vuex Store - Vue js | Vue 3.
Leela Web Dev
80. Dividing the State into different modules and add it in Vuex store - Vue js | Vue 3.
Leela Web Dev
81. Namespacing Modules for the state in the Vuex store - Vue js | Vue3.
Leela Web Dev
82. Managing the Vuex store code in different files and import to single file - Vue js | Vue 3.
Leela Web Dev
83. Declare constants for naming the mutations, actions, and getters in Vuex store - Vue js | Vue 3.
Leela Web Dev
84. Design the Login & Signup Page for implementing the Vue authentication - Vue js | Vue3.
Leela Web Dev
85. Setup the Vuex state management in the authentication project in Vue js | Vue 3.
Leela Web Dev
86. Add Validations for the Login and Signup Page in Vue Authentication - Vue js | Vue 3.
Leela Web Dev
87. Make Http Request in the vuex actions using axios to get token details - Vue js | Vue 3.
Leela Web Dev
88. Save the response data from signup into the vuex store state with mutations in Vue js - Vue 3.
Leela Web Dev
89. Accessing the store state data in the router Navigation Guards in Vue router - Vue js 3 | Vue 3.
Leela Web Dev
90. Catch the errors from the server and show the error message in signup page - Vue js 3 | Vue 3.
Leela Web Dev
91. Add the Loading Spinner Component and use it with the help of store - Vue js 3 | Vue 3.
Leela Web Dev
92. Add the Login Functionality for authentication and saving token in Vuex store - Vuejs 3 | Vue 3.
Leela Web Dev
93. Attach the token for the outgoing HTTP Requests with axios in Vue js 3 | Vue 3.
Leela Web Dev
94. Adding the auth token with Axios request interceptors from Vuex state - Vue js 3 | Vue 3.
Leela Web Dev
95. Adding the authenticate condition to show links in webpage from Vuex state - Vue js 3 | Vue 3
Leela Web Dev
96. Add Logout Functionality by making the auth token empty in the Vuex state - Vue js 3 | Vue 3.
Leela Web Dev
97. Apply Navigation Guards for authentication and Routing page in Vue js 3 | Vue 3
Leela Web Dev
98. Implement AutoLogin Feature by using local storage to save the token - Vue js 3 | Vue 3
Leela Web Dev
99. Implement Auto-Logout functionality when the token expires in Vue js 3 | Vue 3.
Leela Web Dev
100. Optimize Routes by Lazy Loading Components and steps for deploying Project - Vuejs 3 | Vue 3.
Leela Web Dev
101. Introduction to Composition API & Options API and why we need to use it in Vue js 3 | Vue 3.
Leela Web Dev
102. Implement reactive variables with Ref in Composition API in Vue js 3 | Vue 3.
Leela Web Dev
103. Use of Ref and Reactive in composition api. Apply reactive for the objects in Vuejs 3 | Vue 3.
Leela Web Dev
104. isRef, isReactive & toRefs to check reactivity of variable in composition API - Vuejs 3| Vue 3
Leela Web Dev
105. Create methods in the composition API - Vuejs 3 | Vue 3.
Leela Web Dev
106. Create Computed Property methods in the Composition API in Vue js 3 | Vue 3.
Leela Web Dev
107. Implement Two-way Binding with v-model and watch method in composition API - Vue js 3 | Vue 3.
Leela Web Dev
108. Send Props to the components and use the Props in Composition API in Vue js 3 | Vue 3.
Leela Web Dev
109. Understand Template Ref & Reactive ref in the Composition API in Vue js 3 | Vue 3.
Leela Web Dev
110. Emit, Slot & attrs property in context in setup method - Composition API - Vue js 3 | Vue 3.
Leela Web Dev
111. Life Cycle Hooks usage in the Vue Composition API - Vue js 3 | Vue 3.
Leela Web Dev
112. useRouter for navigating to other page in vue router - Composition API - Vue js 3 | Vue 3.
Leela Web Dev
113. Get route params into the component by useRoute and props in Composition API - Vuejs | Vue 3.
Leela Web Dev
114. Access store data in the composition API with useStore in Vuex state Management - Vuejs | Vue 3
Leela Web Dev
115. Extract reusable functionalities with Mixins in Vue js 3 | Vue 3.
Leela Web Dev
116. Data Options Merging in Mixin. Implementing Global Mixin in Vue js 3 | Vue 3.
Leela Web Dev
117. Reuse Common functionality code using hooks in the composition API - Vue js 3 | Vue 3.
Leela Web Dev
118. Completing Vue js course. Next Steps to learn after Vue course - Vue js 3 | Vue 3.
Leela Web Dev