User Interface Programming with Vue.js

2-Day Course Taught Live as In-Person or Online

Course Description

Training 4 Developers’ User Interface Programming with Vue.js training course teaches attendees how to enhance their Vue.js skills using Vue Router, Vuex, and as well as Transitions and Animations. Students develop real-world JavaScript and Vue.js applications with an emphasis on the role and proper use of routing and the URL, as well as how to manage application state using the Redux-inspired Vuex state management library. Finally, to enhance the UI experience of users, transitions, and animations are explored. This class is for developers with modern JavaScript experience and Vue experience.

Students will build a project using Vue.js combined with routing, state management, transitions, and animations to apply their JavaScript and Vue skills and to go deeper in their knowledge of modern UI development. Developers can do wonders with Vue.js, but Vue.js combined with routing and state management transforms Vue.js from a UI library to a UI framework. Students will learn how to leverage Vue.js more like a UI framework to power the user experience of their application.

Course ObjectivesObjectives

  • • Review creating, running and debugging a Vue application with the Vue CLI and Vue Developer Tools
  • • Manage application state with Vuex
  • • Incorporate REST API calls into a Vue and Vuex application
  • • Understand the role of a URL in a modern JavaScript UI application
  • • Leverage Vue Router to add URL based routing to a Vue application
  • • Improve the user experience through transitions and animations
  • • Explore how to unit test Vue application utilizing Vuex, Vue Router as well as transitions and animations

Course PrerequisitesPrerequisites

Attendees should have a good working knowledge of HTML, CSS, ES2015 JavaScript and web development. Also, students should have Vue experience. Students without Vue experience are encouraged to take the Introduction to Vue course as introductory topics will not be covered in this course.

Course RequirementsRequirements

We teach all classes online using Zoom. Students will need to be able to join a Zoom session. We recommend that each student have two displays. One display to view the instructor presentation and one display to use for note-taking and coding along with the instructor. All course materials are distributed via GitHub and Google Drive. Access to those services is needed for the class, please ensure your firewall and network policies will allow students to access those resources.

Course OutlineOutline

The course can be taught in either the JavaScript or the TypeScript languages. Knowledge of JavaScript is needed for both language versions of the course. Knowledge of TypeScript is NOT needed for the TypeScript version.

  1. Quick Review of Vue.js
    1. Create a Vue Application with the CLI
    2. Debugging a Vue Application
    3. Vue Developer Tools
    4. Template Syntax and Expressions
    5. Vue Components and Vue File
  2. Routing
    1. What problem does routing solve?
    2. Using vue-router
    3. Creating a new instance of a Router
    4. Configuring a Route Table
    5. URL Parameters
    6. Catch All
    7. Handling Errors
    8. Nested Routes
    9. Changing Routes Programmatically
    10. Named Routes
    11. Named Views
    12. Redirects
    13. HTML5 History
  3. State Management
    1. What is State Management?
    2. What is Redux?
    3. What is Vuex?
    4. Managing a State Tree
    5. Getters and Computing Derived State
    6. Performing Mutations
    7. Using Actions
  4. Transitions and Animations
    1. CSS Transitions and Animations
    2. Custom Transition Classes
    3. Enter and Leave Transitions
    4. List Transitions
    5. Dynamic Transitions
  5. Unit Testing with Jest
    1. Testing Vuex Code
    2. Routing and Unit Testing
    3. Transitions & Animations and Unit Testing
Scroll to Top