Learn Vue by Building and Deploying a CRUD App



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

Learning Objectives

This course will teach the fundamentals of Vue by building an actual web application. Each chapter in this course will build upon itself to achieve that goal of developing a web app.

The web application that will be built in this course is for managing a list of users that are stored in a database. This type of site is called a CRUD (Create, Read, Update, and Delete) application, as it provides the key functionality for interacting with a database.

By the end of this course, you will be able to:

  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) 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
  5. Create a new Vue project using the Vue CLI and Vue UI
  6. Develop a Vue application using the tooling provided by the Vue UI
  7. Explain how components are the building blocks for Vue applications
  8. Implement unit tests for your Vue components
  9. Pass data between components using props and custom events
  10. Understand the lifecycle of the Vue instance (and components)
  11. Utilize the axios library to interface with an external API (HTTP GET, POST, DELETE, and PUT calls)
  12. Implement a mock of the axios library to unit test using an external API
  13. Migrate data to a Vuex Store
  14. Implement a Single-Page Application (SPA) using Vue Router
  15. Deploy a Vue web application to the web using Netlify

Chapters

Here's a breakdown of the chapters in this course:

Part 1 (Vue Fundamentals)

  1. Introduction to Vue
  2. Changelog
  3. Initial Webpage
  4. Getting Started with Vue
  5. Displaying Lists with the v-for Directive
  6. Using the v-on and v-show Directives
  7. Using the v-if and v-else Directives
  8. Introduction to Methods
  9. Methods (Part II)
  10. Computed Properties
  11. Style Binding

Part 2 (Components)

  1. Introduction to Components
  2. Vue CLI
  3. Vue UI
  4. Components (Part II)
  5. Unit Testing
  6. Props
  7. Components (Part III)
  8. Custom Events
  9. Unit Testing (Part II)

Part 3 (Working with an API)

  1. Vue Lifecyle
  2. TDD: Loading data via GET
  3. TDD: Message Banner
  4. TDD: Saving data via POST
  5. TDD: Deleting data via DELETE
  6. TDD: Updating data via PUT

Part 4 (Vuex and Vue Router)

  1. Introduction to Vuex
  2. TDD: Vuex (Part II)
  3. TDD: Vue Router
  4. Deploying to Netlify
  5. Conclusion

Tools and Technologies

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

TDD begins in Part 3.

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

In Part 2 (Components) and Part 3 (Working with an API), we'll learn about the Vue CLI (Command Line Interface) and the Vue UI (User Interface). 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 CLI/UI.

In Part 4 (Vuex and Vue Router), we'll learn about two libraries (Vuex 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.

Prerequisites

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.

While the software tools needed for this course are primarily an IDE (Integrated Development Environment) for writing code and a web browser for viewing the webpages created, I would also recommend installing the Vue DevTools to help with understanding how Vue works.

I'll be providing examples of what the Vue DevTools show you, but it's a nice tool for understanding what Vue is doing.

Demo

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

Vue CRUD Application Deployed via Netlify

Info

  • Current version: 1.0.0
  • Last updated: January 8th, 2019
  • AuthorPatrick Kennedy




What will you learn?

Part 1

In Part I (Vue Fundamentals), you'll learn how to build a simple web application using Vue.

Within this web application, you'll learn the fundamentals of Vue, how to use methods and computed properties within a Vue project, and the following Vue directives:

  1. v-for
  2. v-on
  3. v-show
  4. v-if and v-else
  5. v-bind

Part 2

In Part 2 (Vue Components), you'll learn about components in Vue, which are the building blocks for all Vue applications.

Additionally, you'll learn about the Vue CLI (Command-Line Interface) and the Vue UI (User Interface), which help to create, structure, and manage our Vue applications.

We started using the Vue UI as our primary tool for serving our Vue application and running our unit tests.

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 UI for running these tests.

Part 3

In Part 3, you'll focus on interfacing with an external API via the following HTTP methods:

  1. GET
  2. POST
  3. PUT
  4. DELETE

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.

Part 4

In Part 4, you'll learn about two libraries that are frequently used in Vue projects:

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

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




Table of Contents

Table of contents from Learn Vue by Building and Deploying a CRUD App:


Part 1
Part 2
  • Components (Part I)
  • Vue ClI
  • Vue UI
  • Components (Part II)
  • Unit Testing (Part I)
  • Props
  • Components (Part III)
  • Custom Events
  • Unit Testing (Part II)
Part 3
  • Vue Lifecycle
  • Loading Data via HTTP GET
  • Banner Message
  • Saving Data via HTTP POST
  • Deleting Data via HTTP DELETE
  • Updating Data via HTTP PUT

Get All 4 parts:


Part 4
  • Vuex (Part I)
  • Vuex (Part II)
  • Vue Router
  • Deploy via Netlify
  • Conclusion



Join our mailing list to be notified about course updates and new tutorials.