You must be logged in to take this course → LOGIN | REGISTER NOW
What you’ll learn
- Understand all Vue concepts from beginner to advanced
-
Build three real world applications using Vue.js utilising every Vue feature
-
Use the Vuex statement management library
- Write basic Vue with ES5 and also modern Vue with ES6
- Setup VueJS environment with development tools including Webpack
- Create a universal application with server-side rendering
- Use popular plugins from the Vue ecosystem like vue-router and vue-resource
- Cutting-edge features like Single File Components, Render functions and Server-Side Rendering
Course Curriculum
1. Introduction & Crash Course | |||
1. Introduction overview | 00:00:00 | ||
2. What is Vue.js | 00:00:00 | ||
3. What can you build with Vue.js | 00:00:00 | ||
4. What do I need to know before learning Vue.js | 00:00:00 | ||
5. Vue basic feature crash course | 00:00:00 | ||
6. Advanced features | 00:00:00 | ||
7. Ecosystem tools | 00:00:00 | ||
8. Vue.js frameworks and plugins | 00:00:00 | ||
9. Framework comparison | 00:00:00 | ||
10. Vue.js Essentials preview | 00:00:00 | ||
2. Build Your First Vue.js App - Introduction | |||
1. Introducing the course | 00:00:00 | ||
3. Build Your First Vue.js App - Setting up the project | |||
1. Starter code installation | 00:00:00 | ||
2. Running the server and viewing the project | 00:00:00 | ||
3. Touring the project files | 00:00:00 | ||
4. Build Your First Vue.js App - Up and running with Vue | |||
1. Including Vue in the project | 00:00:00 | ||
2. Creating an instance of Vue | 00:00:00 | ||
3. Rendering data on the page | 00:00:00 | ||
4. Understanding directives | 00:00:00 | ||
5. Adding a method | 00:00:00 | ||
6. Rendering the list of products | 00:00:00 | ||
7. Adding key to iterated products | 00:00:00 | ||
5. Build Your First Vue.js App - Building the shopping cart | |||
1. Creating the cart | 00:00:00 | ||
2. Understanding reactivity | 00:00:00 | ||
3. Vue Devtools | 00:00:00 | ||
4. Adding products to the cart | 00:00:00 | ||
5. Displaying cart items | 00:00:00 | ||
6. Hiding cart if empty | 00:00:00 | ||
7. Adding quantity to cart items | 00:00:00 | ||
8. Cart items quantity logic | 00:00:00 | ||
9. Understanding filters | 00:00:00 | ||
10. Formatting price | 00:00:00 | ||
11. Adding quantity buttons to template | 00:00:00 | ||
12. Implementing inc and dec logic | 00:00:00 | ||
6. Build Your First Vue.js App - Adding product search | |||
1. Adding search button | 00:00:00 | ||
2. Adding search input | 00:00:00 | ||
3. Overview of vue-resource | 00:00:00 | ||
4. Overview of API | 00:00:00 | ||
5. Adding vue-resource to project | 00:00:00 | ||
6. AJAX call for products | 00:00:00 | ||
7. Build Your First Vue.js App - Building the product list | |||
1. Replacing dummy items | 00:00:00 | ||
2. Adding product image & price | 00:00:00 | ||
3. Adding search result count to product list | 00:00:00 | ||
4. Adding the loading message | 00:00:00 | ||
5. Understanding lifecycle hooks | 00:00:00 | ||
6. Default search on page load | 00:00:00 | ||
7. Understanding transitions | 00:00:00 | ||
8. Fading in cart total | 00:00:00 | ||
9. Fading in cart items | 00:00:00 | ||
8. Build Your First Vue.js App - Scroll loading products | |||
1. How scroll load works | 00:00:00 | ||
2. Adding a sensor element | 00:00:00 | ||
3. Scroll monitor setup | 00:00:00 | ||
4. Triggering code with scroll monitor | 00:00:00 | ||
5. Appending items | 00:00:00 | ||
6. Fixing search results | 00:00:00 | ||
9. Build Your First Vue.js App - Adding finishing touches | |||
1. Loading indicator with v-cloak | 00:00:00 | ||
10. Build A Vue.js Single-Page App with Vue Router - Introduction | |||
1. Introduction | 00:00:00 | ||
11. Build A Vue.js Single-Page App with Vue Router - Overview & setup | |||
1. Demo of the finished product | 00:00:00 | ||
2. Getting data from the OMDB API | 00:00:00 | ||
3. Clone repo, NPM install, setup environment | 00:00:00 | ||
4. Running local server | 00:00:00 | ||
5. Tour of the project files | 00:00:00 | ||
6. Webpack configuration | 00:00:00 | ||
7. Hello World | 00:00:00 | ||
12. Build A Vue.js Single-Page App with Vue Router - Setting up components | |||
1. Vue essentials Components | 00:00:00 | ||
2. Configuring components | 00:00:00 | ||
3. Setup the movie-list component | 00:00:00 | ||
4. Setup the check-filter component | 00:00:00 | ||
13. Build A Vue.js Single-Page App with Vue Router - Filters | |||
1. Vue essentials Props | 00:00:00 | ||
2. Add props to check-filter component | 00:00:00 | ||
3. Making check-filter toggleable | 00:00:00 | ||
4. Vue essentials Custom events | 00:00:00 | ||
5. Emitting a custom event from check-filter | 00:00:00 | ||
6. Vue essentials Vue.js devtools | 00:00:00 | ||
7. Adding a payload to check-filter event | 00:00:00 | ||
8. Processing check-filter event in root instance | 00:00:00 | ||
9. Add filter arrays to movie-list | 00:00:00 | ||
10. Creating logic for genre filter | 00:00:00 | ||
14. Build A Vue.js Single-Page App with-Refactoring with single file components | |||
1. Vue essentials Single file components | 00:00:00 | ||
2. Refactor project to use single file components | 00:00:00 | ||
15. Build A Vue.js Single-Page App with Vue Router - Getting data from API | |||
1. Understanding the API | 00:00:00 | ||
2. Getting data from the API | 00:00:00 | ||
3. Replace dummy data with API data | 00:00:00 | ||
4. Creating movie-item component | 00:00:00 | ||
5. Fleshing out movie-item template | 00:00:00 | ||
6. Enhance genre filter for multi-genre movies | 00:00:00 | ||
7. Adding no results and loading messages | 00:00:00 | ||
16. Build A Vue.js Single-Page App with Vue Router - Displaying session times | |||
1. Adding moment library to project | 00:00:00 | ||
2. Displaying session times | 00:00:00 | ||
3. Filtering session times | 00:00:00 | ||
4. Adding time filters | 00:00:00 | ||
5. Filter movies based on time filter | 00:00:00 | ||
6. Filter sessions based on time filter | 00:00:00 | ||
7. Enhance the no results message with filters | 00:00:00 | ||
17. Build A Vue.js Single-Page App- Component communication with an event bus | |||
1. Vue essentials Event bus | 00:00:00 | ||
2. Using a global event bus in the project | 00:00:00 | ||
18. Build A Vue.js Single-Page App with Vue Router - Creating the Detail page | |||
1. Vue essentials Vue router | 00:00:00 | ||
2. Abstract main page into overview component | 00:00:00 | ||
3. Setting up Vue router | 00:00:00 | ||
4. Adding router-view to main template | 00:00:00 | ||
5. Creating detail page | 00:00:00 | ||
6. Passing movie ID to detail page | 00:00:00 | ||
7. Displaying movie-item in detail page | 00:00:00 | ||
8. Vue essentials Slots | 00:00:00 | ||
9. Incorporating slots in movie-item | 00:00:00 | ||
10. Fleshing out detail page | 00:00:00 | ||
19. Build A Vue.js Single-Page App with Vue Router - Adding the day selector | |||
1. Creating day-select component | 00:00:00 | ||
2. Addings days to day-select | 00:00:00 | ||
3. Day selection logic | 00:00:00 | ||
4. Application-level day property | 00:00:00 | ||
5. Mobile day selector | 00:00:00 | ||
20. Build A Vue.js Single-Page App with Vue Router - Adding tooltips | |||
1. Vue essentials Custom directives | 00:00:00 | ||
2. Adding tooltip custom directive | 00:00:00 | ||
3. Creating tooltip in DOM | 00:00:00 | ||
4. Adding classes and event listeners to tooltip | 00:00:00 | ||
5. Vue essentials Plugins | 00:00:00 | ||
6. Making tooltip a custom plugin | 00:00:00 | ||
21. Build A Vue.js Single-Page App with Vue Router - Finishing touches | |||
1. Adding keep-alive to router to maintain filter state | 00:00:00 | ||
2. How v-cloak works alongside Webpack | 00:00:00 | ||
3. Building for production | 00:00:00 | ||
22. Build A Professional Vue App with Vuex & SSR - Introduction | |||
1. Introduction | 00:00:00 | ||
23. Build A Professional Vue App with Vuex & SSR - Overview & setup | |||
1. Demo of the finished product | 00:00:00 | ||
2. Clone repo, NPM install, setup environment | 00:00:00 | ||
3. Tour of the files | 00:00:00 | ||
4. Webpack configuration and extract text demo | 00:00:00 | ||
24. Build A Professional Vue App with Vuex & SSR - Setting up the calendar | |||
1. Setup the app component | 00:00:00 | ||
2. Add moment to root, set timezone | 00:00:00 | ||
3. Generate list of days in current month | 00:00:00 | ||
4. Padding days to startend of month for complete weeks | 00:00:00 | ||
5. Grouping days into blocks of weeks | 00:00:00 | ||
25. Build A Professional Vue App with Vuex & SSR - Calendar day functionality | |||
1. Vue essentials Shorthands | 00:00:00 | ||
2. Adding calendar-day component | 00:00:00 | ||
3. Adding days of week above calendar grid | 00:00:00 | ||
4. Highlighting current day on calendar | 00:00:00 | ||
5. UI effects for past and days outside of month | 00:00:00 | ||
6. Vue essentials Vuex | 00:00:00 | ||
7. Add Vuex store to project and create basic state properties | 00:00:00 | ||
26. Build A Professional Vue App with Vuex & SSR - Adding the month selector | |||
1. Adding header and creating current-month component | 00:00:00 | ||
2. Displaying date in current-month component | 00:00:00 | ||
3. Adding buttons to current-month component | 00:00:00 | ||
4. Moving Vuex into own file | 00:00:00 | ||
5. Changing month and year with Vuex mutation | 00:00:00 | ||
6. Enhancing current-month logic | 00:00:00 | ||
7. Vue.js Dev Tools Vuex | 00:00:00 | ||
27. Build A Professional Vue App with Vuex & SSR - Creating the event form | |||
1. Creating event-form component | 00:00:00 | ||
2. Capture click in calendar-day | 00:00:00 | ||
3. Positioning Event Form | 00:00:00 | ||
4. Opening and closing Event Form | 00:00:00 | ||
5. Displaying events in calendar-day | 00:00:00 | ||
6. Creating events state in store | 00:00:00 | ||
7. Adding input to event-form | 00:00:00 | ||
8. Submit new event to store | 00:00:00 | ||
9. Get event date in store | 00:00:00 | ||
10. Improving form | 00:00:00 | ||
11. Focus directive, Enter keyup is create | 00:00:00 | ||
12. Displaying date on Event Form | 00:00:00 | ||
13. Highlight Event Form active day | 00:00:00 | ||
28. Build A Professional Vue App with Vuex & SSR - Loading stored events | |||
1. Setup for sending events to server | 00:00:00 | ||
2. Receiving event on server | 00:00:00 | ||
3. Vue essentials Vuex actions | 00:00:00 | ||
4. Creating addEvent action in store | 00:00:00 | ||
5. Returning a promise from addEvent action | 00:00:00 | ||
29. Build A Professional Vue App with Vuex & SSR - Writing events to template | |||
1. Replace Vuex state in main file | 00:00:00 | ||
2. Move mock data to HTML template | 00:00:00 | ||
3. Splicing mock data into HTML file | 00:00:00 | ||
30. Build A Professional Vue App with Vuex & SSR - Server-side rendering | |||
1. Vue essentials Render functions | 00:00:00 | ||
2. Creating root instance template with a render function | 00:00:00 | ||
3. Introduction to server-side rendering | 00:00:00 | ||
4. Server-side rendering webpack flow | 00:00:00 | ||
5. Creating common entry file | 00:00:00 | ||
6. Creating server entry file | 00:00:00 | ||
7. Setting up bundle renderer | 00:00:00 | ||
8. Splicing rendered bundle into HTML template | 00:00:00 | ||
9. Vuex state hydration | 00:00:00 | ||
31. Build A Professional Vue App with Vuex & SSR - Finishing touches | |||
1. Adding image to header and reloading page on initial render | 00:00:00 | ||
2. Building for production | 00:00:00 | ||
32. BONUS CHAPTER Keep Vue in sync across tabs | |||
1. Keep the shopping cart in sync across tabs | 00:00:00 | ||
2. Creating a Pusher account | 00:00:00 | ||
3. Using Vue watchers to hook into reactive changes | 00:00:00 | ||
4. Sending cart data to the server | 00:00:00 | ||
5. Triggering Pusher events from the server | 00:00:00 | ||
6. Receiving Pusher events in the client | 00:00:00 | ||
7. Replacing the cart with data received from Pusher | 00:00:00 |
4 STUDENTS ENROLLED