The Ultimate Vue JS 2 Developers Course

Table of contents

1. Chapter 1 : Introduction
   1. Course introduction
2. Chapter 2 : Project 1 - Overview and setup
   1. Demo of the finished product
   2. Register for the Imgur API
   3. Reviewing the Vue.js Poster Store Github repo
   4. Clone repo, install dependencies and setup environment file
   5. Running server and viewing project
   6. Tour of the project file
3. Chapter 3 : Project 1 - Up and running with Vue
   1. Include Vue in project
   2. Creat an instance of Vue
   3. Adding a data property
   4. Vue essentials: Directives
   5. Adding a method
   6. Rendering a list of items
   7. Add classes to item
4. Chapter 4 : Project 1 - Adding product search
   1. First, a request!
   2. Creating the cart
   3. Vue essentials: Reactivity
   4. Iterate cart items in template
   5. Enhancing cart in the template
   6. Hide cart if empty
   7. Adding quantity to cart items
   8. Cart items quantity logic
   9. Adding price to cart items
   10. Vue essentials: Filters
   11. Formatting price
   12. Adding quantity buttons to template
   13. Quantity buttons logic
   14. Adding classes and breaking loop in add Items
5. Chapter 5 : Project 1 - Adding product search
   1. Search button
   2. Search input
   3. Overview of vue-resource
   4. Overview of API
   5. Adding vue-resource to project
   6. AJAX call for products
6. Chapter 6 : Project 1 - Building the product list
   1. Replacing dummy items with the real thing
   2. Product image
   3. Adding search result count to product list
   4. Loading message
   5. Vue essentials: Lifecycle hooks
   6. Default search on page load
   7. Adding price to products
7. Chapter 7 : Project 1 - Enhancing the shopping cart
   1. Vue essentials: Transitions
   2. Fading in cart total
   3. Vue essentials: Key
   4. Vue essentials: List transitions
   5. Fade in cart items
8. Chapter 8 : Project 1 - Scroll loading products
   1. How scroll load works
   2. Creating the results array
   3. Including scroll monitor in the project
   4. Scroll monitor basic setup
   5. Implementing scroll load (part 1)
   6. Implementing scroll load (part 2)
   7. Fixing search results
   8. Adding a "no more items" message
   9. Vue essentials: Computed properties
   10. Enhancing "no more items" logic
9. Chapter 9 : Project 1 - Finishing touches
   1. Hiding elements before Vue compiles them
   2. Requiring a search string
10. Chapter 10 : Project 2 - Overview and setup
    1. Demo of the finished product
    2. Getting data from the OMDB API
    3. Clone repo, NPM install, setup environment
    4. Running local server
    5. Tour of the project files
    6. Webpack configuration
    7. Hello World
11. Chapter 11 : Project 2 - Setting up components
    1. Vue essentials: Components
    2. Configuring components
    3. Setup the movie-list component
    4. Setup the check-filter component
12. Chapter 12 : Project 2 - Filters
    1. Vue essentials: Props
    2. Add props to check-filter component
    3. Making check-filter toggleable
    4. Vue essentials: Custom events
    5. Emitting a custom event from check-filter
    6. Vue essentials: Vue.js devtools
    7. Adding a payload to check-filter event
    8. Processing check-filter event in root instance
    9. Add filter arrays to movie-list
    10. Creating logic for genre filter
13. Chapter 13 : Project 2 - Refactoring with single file components
    1. Vue essentials: Single file components
    2. Refactor project to use single file components
14. Chapter 14 : Project 2 - Getting data from API
    1. Understanding the API
    2. Getting data from the API
    3. Replace dummy data with API data
    4. Creating movie-item component
    5. Fleshing out movie-item template
    6. Enhance genre filter for multi-genre movies
    7. Adding no results and loading messages
15. Chapter 15 : Project 2 - Displaying session times
    1. Adding moment library to project
    2. Displaying session times
    3. Filtering session times
    4. Adding time filters
    5. Filter movies based on time filter
    6. Filter sessions based on time filter
    7. Enhance the no results message with filters
16. Chapter 16 : Project 2 - Component communication with an event bus
    1. Vue essentials: Event bus
    2. Using a global event bus in the project
17. Chapter 17 : Project 2 - Creating the Detail page
    1. Vue essentials: Vue router
    2. Abstract main page into overview component
    3. Setting up Vue router
    4. Adding router-view to main template
    5. Creating detail page
    6. Passing movie ID to detail page
    7. Displaying movie-item in detail page
    8. Vue essentials: Slots
    9. Incorporating slots in movie-item
    10. Fleshing out detail page
18. Chapter 18 : Project 2 - Adding the day selector
    1. Creating day-select component
    2. Addings days to day-select
    3. Day selection logic
    4. Application-level day property
    5. Mobile day selector
19. Chapter 19 : Project 2 - Adding tooltips
    1. Vue essentials: Custom directives
    2. Adding tooltip custom directive
    3. Creating tooltip in DOM
    4. Adding classes and event listeners to tooltip
    5. Vue essentials: Plugins
    6. Making tooltip a custom plugin
20. Chapter 20 : Project 2 - Finishing touches
    1. Adding keep-alive to router to maintain filter state
    2. How v-cloak works alongside Webpack
    3. Building for production
21. Chapter 21 : Project 3 - Overview and setup
    1. Demo of the finished product
    2. Clone repo, NPM install, setup environment
    3. Tour of the files
    4. Webpack configuration and extract text demo
22. Chapter 22 : Project 3 - Setting up the calendar
    1. Setup the app component
    2. Add moment to root, set timezone
    3. Generate list of days in current month
    4. Padding days to start/end of month for complete weeks
    5. Grouping days into blocks of weeks
23. Chapter 23 : Project 3 - Calendar day functionality
    1. Vue essentials: Shorthands
    2. Adding calendar-day component
    3. Adding days of week above calendar grid
    4. Highlighting current day on calendar
    5. UI effects for past and days outside of month
    6. Vue essentials: Vuex
    7. Add Vuex store to project and create basic state properties
24. Chapter 24 : Project 3 - Adding the month selector
    1. Adding header and creating current-month component
    2. Displaying date in current-month component
    3. Adding buttons to current-month component
    4. Moving Vuex into own file
    5. Changing month and year with Vuex mutation
    6. Enhancing current-month logic
    7. Vue.js Dev Tools: Vuex
25. Chapter 25 : Project 3 - Creating the event form
    1. Creating event-form component
    2. Capture click in calendar-day
    3. Positioning Event Form
    4. Opening and closing Event Form
    5. Displaying events in calendar-day
    6. Creating events state in store
    7. Adding input to event-form
    8. Submit new event to store
    9. Get event date in store
    10. Improving form
    11. Focus directive, Enter keyup is create
    12. Displaying date on Event Form
    13. Highlight Event Form active day
26. Chapter 26 : Project 3 - Loading stored events
    1. Setup for sending events to server
    2. Receiving event on server
    3. Vue essentials: Vuex actions
    4. Creating addEvent action in store
    5. Returning a promise from addEvent action
27. Chapter 27 : Project 3 - Writing events to template
    1. Replace Vuex state in main file
    2. Move mock data to HTML template
    3. Splicing mock data into HTML file
28. Chapter 28 : Project 3 - Server-side rendering
    1. Vue essentials: Render functions
    2. Creating root instance template with a render function
    3. Introduction to server-side rendering
    4. Server-side rendering webpack flow
    5. Creating common entry file
    6. Creating server entry file
    7. Setting up bundle renderer
    8. Splicing rendered bundle into HTML template
    9. Vuex state hydration
29. Chapter 29 : Project 3 - Finishing touches
    1. Adding image to header and reloading page on initial render
    2. Building for production
30. Chapter 30 : Wrap up
    1. Wrap up