Introduction

Part 1, Chapter 1

As with a lot of new technologies, I find that the best way to learn something new is to actually build something.

With that in mind, this course will teach the fundamentals of Vue 3 by building an actual web application. Each chapter in this course will build upon itself to achieve the 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.

Why use a JavaScript framework?

Before jumping into how to get started with Vue, let's start with some questions: Why use Vue at all? Why not use standard (vanilla) JavaScript?

While there is nothing wrong with using standard JavaScript, using a JavaScript framework is much easier. When I use the word easier here, I really mean, well, easier...

A JavaScript framework will provide you with:

• a set of tools to be able to write less code
• a set of tools to build more complex functionality
• a structure to write reusable components
• a set of tools to keep your data synchronized with your user interface
• a set of third-party libraries to expand your use of the framework

Using a JavaScript framework is not always the correct answer for a project. There are a lot of examples where a webpage with HTML, CSS, and a little bit of standard JavaScript is the answer (such as a restaurant's website, a personal blog, etc.).

However, as you get into more complex user interactions (as we will see in this Vue course), a JavaScript framework provides a lot of advantages in terms of reducing the complexity of the code that you need to write and providing a structure to make reusable software modules (Vue components).

Why do I like Vue?

First, I really enjoy writing web applications with Vue. After learning JavaScript, Vue was a shining light of how to successfully use JavaScript to build more interactive web applications (beyond HTML and CSS only). The user interfaces that you can develop with Vue (really, with all JavaScript frameworks) are incredible.

After learning Vue, I simply find the framework to make sense. That's a personal preference, but I hope that this course provides that same excitement for you to start building your own web applications.

I really like the flexibility that Vue provides; you can use it to enhance a section in your overall web application -OR- you can use it to build complex single-page applications (SPA).

Lastly, the documentation for Vue is well done!

Vue 3

Vue was first released in 2014, with a major upgrade in 2016, known as Vue 2. Popularity skyrocketed with Vue 2. It also become stable.

Vue 3 was released in September 2020; it became the default version of Vue in February 2022. Besides performance improvements, Vue 3 provides a new structure (Composition API) for organizing components. Components will be covered in detail in Part II (Components) of this course.

While both Vue 2 and Vue 3 are great options, this course utilizes Vue 3.

Support (updates/patches) for Vue 2 is expected to stop at the end of 2023.

What are we building with Vue?

One of the key advantages of JavaScript frameworks is their focus on building components to structure your web application. To highlight this concept, here is an overview of the web page that we will be creating in this course:

As we start delving into Vue, the structure of this web page will lend itself well to a group of components:

• Header
• Content
• Footer

This is one of the great advantages of a JavaScript framework like Vue... there is already an established pattern/guidance for building reusable components that can easily be plugged into a web application.

Don't worry, you don't need to fully understand the concept of a component just yet, but I wanted to provide a preview of where we are going with Vue and how it can provide such an excellent structure to your web application.