Add Vue.js to your web design toolbox. Learn how to use Vue in three real-world example projects: a product customizer, a directory, and a status board app.
We're building the same little apps with a different toolkit. First, I'll look at some of the conceptual aspects of Vue and some of the associated terminology to help us get our bearings. Then we'll work through three small websites, incorporating Vue into each. We'll create a simple product customizer to get acquainted with the structure of Vue instances, how to manage data and respond to events. Next we'll work on a searchable, filterable directory of people for a small company which will include a filtering form and simple animation. Our final project will be a small status update app which interacts with a simple API I am providing using asynchronous network requests and also incorporate a third-party component.
In the end, you'll see what makes Vue interesting and be able to add it to your web design toolbox without a lot of headaches. Whether you've used React or another framework like this, I think you'll agree it's a pleasure to use. Let's go!
- Installing Vue.js and Vue devtools
- Creating interactive components
- Adding data to components
- Listening for events
- Scaffolding components
- Building and wiring forms
- Animating transitions
- Incorporating live data via REST APIs
- Adding third-party Vue components