The Ultimate Vue JS 2 Developers Course

Video description

This Course contains all Vue concepts from beginner to advanced, way to create a universal application with server-side rendering and uses popular plugins from the Vue ecosystem like vue-router and vue-resources.

What You Will 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.

Audience

The course is intended for existing web developers looking to learn Vue.js, new web developers looking to pick up a Javascript framework, curious React and Angular developers.

About The Author

Anthony Gore: Anthony is a web developer and online course instructor from Sydney, Australia. He is the author of the Ultimate Vue.js Developers video course and curator of the Vue.js Developers Newsletter.He has worked for several years as freelancer web developer, but he has also worked for large organisations.He has done development work on all kinds of projects from single page web apps to corporate mega-sites.Besides web development he is a keen musician and enjoys travelling and working remotely

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

Product information

  • Title: The Ultimate Vue JS 2 Developers Course
  • Author(s): Anthony Gore
  • Release date: July 2017
  • Publisher(s): Packt Publishing
  • ISBN: 9781788394086