The Ultimate Vue JS 2 Developers Course [Video]

Preview in Mapt

The Ultimate Vue JS 2 Developers Course [Video]

Anthony Gore

Learn to code Vue JS 2 by building three professional application
Mapt Subscription
FREE
$29.99/m after trial
Video
$106.25
RRP $124.99
Save 14%
What do I get with a Mapt Pro subscription?
  • Unlimited access to all Packt’s 5,000+ eBooks and Videos
  • Early Access content, Progress Tracking, and Assessments
  • 1 Free eBook or Video to download and keep every month after trial
What do I get with an eBook?
  • Download this book in EPUB, PDF, MOBI formats
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
What do I get with Print & eBook?
  • Get a paperback copy of the book delivered to you
  • Download this book in EPUB, PDF, MOBI formats
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
What do I get with a Video?
  • Download this Video course in MP4 format
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
$0.00
$106.25
$29.99p/m after trial
RRP $124.99
Subscription
Video
Start 30 Day Trial

Frequently bought together


The Ultimate Vue JS 2 Developers Course [Video] Book Cover
The Ultimate Vue JS 2 Developers Course [Video]
$ 124.99
$ 106.25
Web development with Vue.js 2 [Video] Book Cover
Web development with Vue.js 2 [Video]
$ 124.99
$ 106.25
Buy 2 for $35.00
Save $214.98
Add to Cart
Subscribe and access every Packt eBook & Video.
 
  • 5,000+ eBooks & Videos
  • 50+ New titles a month
  • 1 Free eBook/Video to keep every month
Start Free Trial
 

Video Details

ISBN 139781788394086
Course Length12 hours and 56 minutes

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.

Style and Approach

The course will introduce the viewers to fundamentals of Vue.Js. Followed by lessons on development tools like Webpack and end with creation of a universal application with server-side rendering.

Table of Contents

Introduction
Course introduction
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
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
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
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
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
Project 1 - Enhancing the shopping cart
Vue essentials: Transitions
Fading in cart total
Vue essentials: Key
Vue essentials: List transitions
Fade in cart items
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
Project 1 - Finishing touches
Hiding elements before Vue compiles them
Requiring a search string
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
Project 2 - Setting up components
Vue essentials: Components
Configuring components
Setup the movie-list component
Setup the check-filter component
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
Project 2 - Refactoring with single file components
Vue essentials: Single file components
Refactor project to use single file components
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
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
Project 2 - Component communication with an event bus
Vue essentials: Event bus
Using a global event bus in the project
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
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
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
Project 2 - Finishing touches
Adding keep-alive to router to maintain filter state
How v-cloak works alongside Webpack
Building for production
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
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
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
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
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
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
Project 3 - Writing events to template
Replace Vuex state in main file
Move mock data to HTML template
Splicing mock data into HTML file
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
Project 3 - Finishing touches
Adding image to header and reloading page on initial render
Building for production
Wrap up
Wrap up

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

Authors

Table of Contents

Introduction
Course introduction
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
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
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
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
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
Project 1 - Enhancing the shopping cart
Vue essentials: Transitions
Fading in cart total
Vue essentials: Key
Vue essentials: List transitions
Fade in cart items
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
Project 1 - Finishing touches
Hiding elements before Vue compiles them
Requiring a search string
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
Project 2 - Setting up components
Vue essentials: Components
Configuring components
Setup the movie-list component
Setup the check-filter component
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
Project 2 - Refactoring with single file components
Vue essentials: Single file components
Refactor project to use single file components
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
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
Project 2 - Component communication with an event bus
Vue essentials: Event bus
Using a global event bus in the project
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
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
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
Project 2 - Finishing touches
Adding keep-alive to router to maintain filter state
How v-cloak works alongside Webpack
Building for production
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
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
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
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
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
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
Project 3 - Writing events to template
Replace Vuex state in main file
Move mock data to HTML template
Splicing mock data into HTML file
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
Project 3 - Finishing touches
Adding image to header and reloading page on initial render
Building for production
Wrap up
Wrap up

Video Details

ISBN 139781788394086
Course Length12 hours and 56 minutes
Read More

Read More Reviews

Recommended for You

Web development with Vue.js 2 [Video] Book Cover
Web development with Vue.js 2 [Video]
$ 124.99
$ 106.25
Vue.js 2 Recipes [Video] Book Cover
Vue.js 2 Recipes [Video]
$ 124.99
$ 106.25
State management in Vue.js and Firebase essentials [Integrated Course] Book Cover
State management in Vue.js and Firebase essentials [Integrated Course]
$ 124.99
$ 106.25
Up and Running with Vue.js [Integrated Course] Book Cover
Up and Running with Vue.js [Integrated Course]
$ 124.99
$ 106.25
Vue.js 2 and Bootstrap 4 Web Development Book Cover
Vue.js 2 and Bootstrap 4 Web Development
$ 35.99
$ 25.20
The Majesty Of Vue.js Book Cover
The Majesty Of Vue.js
$ 31.99
$ 22.40