O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

The Ultimate Vue JS 2 Developers Course

The Ultimate Vue JS 2 Developers Course

by Anthony Gore
Publisher: Packt Publishing
Release Date: July 2017
ISBN: 9781788394086
View table of contents
Start watching

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