The Ultimate Vue JS 2 Developers Course

The Ultimate Vue JS 2 Developers Course

by Anthony Gore
Released July 2017
Publisher(s): Packt Publishing
ISBN: 9781788394086

Explore a preview version of The Ultimate Vue JS 2 Developers Course right now.

O’Reilly members get unlimited access to live online training experiences, plus books, videos, and digital content from 200+ publishers.

Start your free trial

Video description

Learn to code Vue JS 2 by building three professional application

About This Video

  • 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.

    • In Detail

    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.

    Table of contents

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

    Product information

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