Learn Vue by Building and Deploying a CRUD App

  • Updated August 31st, 2022
  • v3.0.0
Patrick Kennedy Patrick Kennedy

Learn Vue by building and testing a full-featured web application!

This course teaches the fundamentals of Vue 3 by building an actual web application for managing a list of users stored in a database. Each chapter builds upon itself to achieve that goal of developing a web app.

What will you learn?

Select a Part

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

  1. Create a website using Vue to enhance the functionality of the web application
  2. Utilize the key Vue directives (v-for, v-on, v-show, v-if, v-else, v-bind) to add logic to your web application
  3. Understand how to use methods and computed properties
  4. 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

  1. Create a new Vue 3 project using the Vue build tools
  2. Develop a Vue 3 application using the tooling provided by the Vue build tools
  3. Explain how components are the building blocks for Vue applications
  4. Implement unit tests for your Vue components
  5. 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

  1. Understand the lifecycle of the Vue instance (and components)
  2. Utilize the axios library to interface with an external API (HTTP GET, POST, DELETE, and PUT calls)
  3. 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:

  1. Pinia - state management library
  2. Vue Router - router library

The course culminates with deploying the Vue web application to the web using Netlify.

Learning Objectives

  1. Migrate data to a data store using Pinia
  2. Implement a Single-Page Application (SPA) using Vue Router
  3. Deploy a Vue web application to the web using Netlify

What do you need to know?

This course is intended for people with some experience with HTML/CSS and JavaScript. No prior experience with other JavaScript frameworks (React, Angular, etc.) is necessary.

Meet the Author

Patrick Kennedy

Patrick Kennedy

Patrick is a software engineer from the San Francisco Bay Area with experience in C++, Python, and JavaScript. His favorite areas of teaching are Vue and Flask. In his free time, he enjoys spending time with his family and cooking.

What developers are saying

The TestDriven.io courses are some of the best courses I've ever done for any language, any platform, any price range... just some of the most thorough and well-sourced courses around.

Just a word of thanks for doing such a great job with these training courses. The thorough, entire-lifecycle approach -- from implementation through test, coverage, quality, CI/CD, and all the rest -- is what separates these courses from other training material that I've completed. I'll be able to walk away from here with knowledge and skills that I can apply immediately at work -- and for that I'm grateful. It's a rare gift in an environment where so much 'training' is really just lightweight treatment that doesn't begin to scratch the surface of real, end-to-end software development. Really well done!

The TestDriven.io courses are worth 10 times what I paid for them.

I'm writing to thank you for all the tutorials and the work you've put out there. I'm new to DevOps and I found TestDriven.io while looking for Django and DevOps related topics. One of the best collections of tutorials and guides I've seen -- very well-written, clear, and concise. You have saved me so much time and energy. Thanks from the bottom of my heart.

I am very much into buying and purchasing any course by you and your team. I've never felt like a better programmer ready to show my coding chops to the world.

Frequently Asked Questions

What tools and technologies are used in this course?

This course is focused on teaching the fundamentals of Vue by building and testing a web application using Test-Driven Development (TDD).

This course uses Vue 3 (with the Composition API) plus the following Vue tooling:

TDD begins in Part 3.

In Part 1 of this course, we'll be building a simple web application in an HTML file; all of the JavaScript (Vue) code will be in this single file.

In Part 2 and 3, we'll learn about the Vue build tools that leverage Vite. As we start to build a more complex Vue application using multiple components, we'll see the power of being able to easily create and develop a Vue application using the Vue build tools.

In Part 4, we'll learn about two libraries (Pinia and Vue Router) that are frequently used in larger Vue projects.

As the culmination of this course, we'll deploy the Vue web application to the web using Netlify.

What will you build?

An example of the web application that will be created in this course can be found at:

Vue CRUD Application Deployed via Netlify

What support does TestDriven.io offer?

Since the courses mimic real-world development, support is provided via Stack Overflow. Helpful users, including the developers of the courses, read and respond to messages on Stack Overflow. If you get stuck and you can't find an answer via Stack Overflow, feel free to reach out via email directly. Just be sure to detail what you've tried. For more, review Support and Consulting.

How long does it take to complete the course?

It's dependent on your current skill level. On average, it takes approximately 12 hours to complete.