In Part I, you'll learn how to build a simple web application using Vue 3. Within this web application, you'll learn the fundamentals of Vue, how to use methods and computed properties within a Vue project, and a number of Vue directives.
Learning Objectives
- Create a website using Vue to enhance the functionality of the web application
- Utilize the key Vue directives (
v-for, v-on, v-show, v-if, v-else, v-bind) to add logic to your web application
- Understand how to use methods and computed properties
- Create dynamic styling of a web application using style binding
In Part 2, you'll learn about components in Vue, which are the building blocks for all Vue applications. Additionally, you'll learn about the Vue build tools, which help to create, structure, and manage Vue applications. In order to test the components that are developed, you'll learn how to develop unit tests for the Vue components and how to use the Vue build tools for running these tests.
Learning Objectives
- Create a new Vue 3 project using the Vue build tools
- Develop a Vue 3 application using the tooling provided by the Vue build tools
- Explain how components are the building blocks for Vue applications
- Implement unit tests for your Vue components
- Pass data between components using props, custom events, and slots
In Part 3, you'll focus on interfacing with an external API via the GET, POST, PUT, and DELETE HTTP methods. In addition, you'll learn about the Vue lifecycle and how we can take advantage of Vue's lifecycle hooks to initialize our components properly. In order to unit test the HTTP methods making calls to an external API, we'll learn about mocking the calls to an external library to facilitate developing unit tests.
Learning Objectives
- Understand the lifecycle of the Vue instance (and components)
- Utilize the axios library to interface with an external API (HTTP GET, POST, DELETE, and PUT calls)
- Implement a mock of the axios library to unit test using an external API
In Part 4, you'll learn about two libraries that are frequently used in Vue projects:
- Pinia - state management library
- Vue Router - router library
The course culminates with deploying the Vue web application to the web using Netlify.
Learning Objectives
- Migrate data to a data store using Pinia
- Implement a Single-Page Application (SPA) using Vue Router
- Deploy a Vue web application to the web using Netlify