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