The Ultimate Vue JS 2 Developers Course

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.

    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.

    Publisher resources

    Download Example Code

    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