Find online courses made by experts from around the world.
Take your courses with you and learn anywhere, anytime.
Learn and practice real-world skills and achieve your goals.
Because Vue is so intuitive there's no need to do long boring lectures to learn it. In this course we will learn by doing. I will lead you through the process of building a simple but powerful e-commerce UI complete with products and a shopping cart that will utilise most of the essential features of Vue.
In addition to writing code, we will also take the time to discuss the essential Vue concepts so that you leave with a solid understanding of Vue in addition to having the skill and confidence to go and start building your own Vue apps.
However, if you're mostly looking to learn advanced concepts of Vue.js like single page components or server-side rendering, this course probably isn't for you as we're going to be focusing on the essentials.
Not for you? No problem.
30 day money back guarantee.
Learn on the go.
Desktop, iOS and Android.
Certificate of completion.
|Section 1: Project setup|
Demo of the finished productPreview
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 filesPreview
|Section 2: Up and running with Vue|
Include Vue in projectPreview
Creat an instance of VuePreview
Adding a data property
Vue essentials: DirectivesPreview
Adding a method
Rendering a list of items
Add classes to items
|Section 3: Building the shopping cart|
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
Adding quantity buttons to template
Quantity buttons logic
Adding classes and breaking loop in addItems
|Section 4: Adding product search|
Overview of vue-resource
Overview of API
Adding vue-resource to project
AJAX call for products
|Section 5: Building the product list|
Replacing dummy items with the real thing
Adding search result count to product list
Vue essentials: Lifecycle hooks
Default search on page load
Adding price to products
|Section 6: Enhancing the shopping cart|
Vue essentials: Transitions
Fading in cart total
Vue essentials: Key
Vue essentials: List transitions
Fade in cart items
|Section 7: 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
|Section 8: Finishing touches|
Hiding elements before Vue compiles them
Requiring a search string
|Section 9: Wrap up|
I've done web development as a freelancer as well as for large organisations. I've done development work on all kinds of projects from single page apps to corporate mega-sites.
I hope to meet you in one of my courses!