Learn Vue.js

Create web apps with Vue.js and its growing ecosystem

By Overflow Club

Instructor: Mohamed Mansour

1

About Me

I'm Mo Mansour

A full-stack web developer, with a Vue and Nuxt experience.

Let's connect on GitHub and LinkedIn:

  • github.com/itsmohmans

  • linkedin.com/in/mansourmoh

Working on projects you may know, such as PSUT Archive.

Section I: Introduction

What will you learn in this course?

  • What is Vue and Why
  • Introduction to Node.js and NPM
  • A quick history of the web and web development
  • Hands-on: Setting Up the Development Environment

Section II: Getting Started with Vue

What will you learn in this course?

  • Understanding Vue.js Fundamentals
  • Setting Up a Basic Vue Application
  • Working with Templates and Directives
  • Handling User Input
  • Creating Components
  • Vite and Build Tools
  • Composition API and Options API
  • Routing in Vue.js
  • State Management with Pinia
  • Hands-on Project: Building a To-Do List Application

Section III: Deep Dive into Vue and its Ecosystem

What will you learn in this course?

  • Custom Directives
  • Slots
  • Provide / Inject
  • Async Components
  • Plugins
  • Built-in Components
  • Performance and Accessibility
  • Dealing with Vue’s ecosystem
  • Best Practices
  • Tooling
  • Deploying a Vue front-end app

Section IV: Server-side Rendering with Nuxt

What will you learn in this course?

  • What is Server-Side Rendering
  • What is Nuxt
  • Getting Started with Nuxt and Making Simple SSR Apps

Section V: TypeScript and Vue

What will you learn in this course?

  • What is Type-Safety and TypeScript
  • Basics of TS
  • Using TS with Vue and Nuxt

Section I: Introduction

Now Let's Start

What is Vue and Why?

What is Vue and Why?

Vue is a JavaScript framework designed for building frontend web apps.

It extends the standard web languages: HTML, CSS, and JavaScript with its component-based architecture that makes the codebase more maintainable and scalable.

Vue is also known for its reactivity system, which ensures that any change made in the data would instantly reflect in the UI while only re-rendering the specific component where there was a change.

What is Vue and Why?

One of Vue's key strengths is its simplicity and ease of integration. Whether you're building a simple or a complex web application, Vue provides a flexible and intuitive framework that helps developers build web applications faster and more efficiently.

It also has a vibrant and very active community, extensive documentation (one of the best docs I've ever read), and a growing ecosystem of plugins and tools. Vue.js has become a popular choice among developers worldwide for building modern web applications.

Built with Vue

Vue has been adopted by many companies and hobbyists alike due to the reasons mentioned. These are some of the most popular websites that use Vue as their frontend:

Section I: Introduction

Node and NPM

Node.js is a JavaScript runtime environment that allows us to run JavaScript code outside a web browser. It uses the V8 JavaScript engine, the same engine used by Chromium, to execute JavaScript code on the server-side.

Node and NPM

Yes. We won't need Node with Vue as a server environment because we'll only develop applications for the client side, or frontend web apps.

However, we'll need to use Node during the development process in order for us to use Vite tool to build our app, which runs in Node environment.

Server side? b-but isn't Vue a frontend framework?

Node and NPM

Vite?

Vite is a build tool created by the same creator of Vue, Evan You, and it works on Node.js under the hood to provide fast and efficient development workflows.

In Vue development, Vite allows for quick project setup and scaffolding, development server management, and optimized build processes.

And when we say the build process, it simply means translating our Vue code to JS, HTML, CSS, and linking them together so that a web browser can understand and run our project.

Node and NPM

NPM

Or Node Package Manager, is a package manager for Node.js, duh. It is used to install, manage, and share packages of JavaScript code. NPM allows us to easily add functionality to our Vue.js projects (and basically any JS project) by installing third-party libraries and dependencies.

Section I: Introduction

A quick history of web development

In the early days of the web, websites were primarily static HTML pages.

Content was fixed and could not be dynamically updated without manual changes to the HTML files.

Introducing JavaScript revolutionized web development.

It enabled dynamic and interactive web pages by allowing client-side scripting.

While also enhanced user experience through features like form validation, dynamic content updates, and interactivity.

JS

A quick history of web development

Browser wars refer to the competition between web browsers for dominance in the market.

This competition led to rapid innovation and development of new web technologies.

However, it also resulted in inconsistent support for web standards, creating challenges for developers.

Browser Wars

A quick history of web development

In the evolution to the current state of web dev, several significant frameworks and tools have played crucial roles in shaping modern web development lifecycle and practices.

Fast-forward: from jQuery to Vue.js

A quick history of web development

jQuery dominated web development during the mid 2000s.

Then Google introduced Angular in 2010, then Facebook introduced React in 2013, and they popularized component-based architecture in web development.

Vue.js was announced in 2014 as a lightweight and flexible alternative, gaining popularity for its simplicity and ease of use.

Further Reading

A quick history of web development

Section I: Introduction

Setting Up the Development Environment

Browser-based development

You can, without installing anything on your computer, build Vue applications and follow this course using only your browser and any of these online tools:

Setting Up the Development Environment

These tools make it easier to get started, learn, or test and prototype something quickly, as they already set everything up for you and all you need is to write the code.

However, you should also set up the local environment to take full control over your code and make it easier to deploy or write complex apps.

Setting Up the Development Environment

Local development environment

1. Node.js

Head to https://nodejs.org and install v18 or above (v20 is ok).

By default, installing Node will also include the NPM cli tool, which is the official one to manage NPM dependencies.

Setting Up the Development Environment

Local development environment

1. Node.js

There are many CLI tools that we can use to manage dependencies, and all of them will achieve the same goal, but some are more efficient and faster than npm. The most popular alternatives are Yarn (my personal preference), and pnpm. Throught this course, I'll just use npm, but you can use whatever.

Setting Up the Development Environment

Local development environment

2. A code editor

Use whatever you want, I don't really care. I'll personally use VS Code.

Setting Up the Development Environment

Local development environment

3. A terminal

You need a terminal to be able to use node tools and to build the project (which also means you should be familiar with using a terminal). If you use VS Code, then the integrated terminal in VS Code should be enough.

You can open it by Ctrl + `.

Any major OS has an integrated terminal.

Setting Up the Development Environment

Create a new Vue project by writing any of these commands in the terminal, depending on the package manager of your choice:

npm create vue@latest # if you use npm
yarn create vue@latest # if you use yarn

You should be ready, now it's time to create a Vue project.

Setting Up the Development Environment

npm create vue@latest # if you use npm
yarn create vue@latest # if you use yarn

It'll ask for the project name, and whether you want to add optional plugins or libraries. For now, answer No to all of them.

From now on, all commands related to the package manager will be written as npm

Setting Up the Development Environment

Running and building the app

Before we do this, we need to first install the dependencies:

# go into the project main directory and run
npm install # (or npm i for short)

Setting Up the Development Environment

Running and building the app

After installation is finished, you'll be ready to run the project

npm run dev

Now the project is running in development mode and can found by default at

http://localhost:5173/

Setting Up the Development Environment

You should find this when you open the project

Setting Up the Development Environment

This is the base Vue app, which we'll delete later to start a blank project. But before we do that, you need to take a look at all the links provided (the documentation, tooling, ecosystem, community etc...) and save them.

Go run the project to find the links, I ain't listing them here.

Setting Up the Development Environment

It's important to familiarize yourself with the documentation and the ecosystem, because at any time in the future, and in a professional working environment, the only reliable reference for you to learn anything is their docs — and Vue docs are amazing.  rtfm.

.
├── index.html
├── jsconfig.json
├── package.json
├── public/
│   └── favicon.ico
├── README.md
├── src/
│   ├── App.vue
│   ├── assets/
│   │   ├── base.css
│   │   ├── logo.svg
│   │   └── main.css
│   ├── components/
│   │   ├── HelloWorld.vue
│   │   ├── icons/
│   │   │   ├── IconCommunity.vue
│   │   │   ├── IconDocumentation.vue
│   │   │   ├── IconEcosystem.vue
│   │   │   ├── IconSupport.vue
│   │   │   └── IconTooling.vue
│   │   ├── TheWelcome.vue
│   │   └── WelcomeItem.vue
│   └── main.js
└── vite.config.js

A simple project file tree should look similar to this, by default

Understanding the Project's File Structure

Understanding the Project's File Structure

.
├── index.html
├── jsconfig.json
├── package.json
├── public/
│   └── favicon.ico
├── README.md
├── src/
│   ├── App.vue
│   ├── assets/
│   │   ├── base.css
│   │   ├── logo.svg
│   │   └── main.css
│   ├── components/
│   │   ├── HelloWorld.vue
│   │   ├── icons/
│   │   │   ├── IconCommunity.vue
│   │   │   ├── IconDocumentation.vue
│   │   │   ├── IconEcosystem.vue
│   │   │   ├── IconSupport.vue
│   │   │   └── IconTooling.vue
│   │   ├── TheWelcome.vue
│   │   └── WelcomeItem.vue
│   └── main.js
└── vite.config.js

The main html file that acts as the template around the Vue web app

The code and logic, assets, and components will lie in the src directory.

This folder contains reusable Vue components, Which are the building blocks of your application and can be used across different parts of your app.

This is where the Vue instance is initialized, and the app is mounted to a DOM element (which is in index.html). This file also handles the integration of various plugins

Understanding the Project's File Structure

.
├── index.html
├── jsconfig.json
├── package.json
├── public/
│   └── favicon.ico
├── README.md
├── src/
│   ├── App.vue
│   ├── assets/
│   │   ├── base.css
│   │   ├── logo.svg
│   │   └── main.css
│   ├── components/
│   │   ├── HelloWorld.vue
│   │   ├── icons/
│   │   │   ├── IconCommunity.vue
│   │   │   ├── IconDocumentation.vue
│   │   │   ├── IconEcosystem.vue
│   │   │   ├── IconSupport.vue
│   │   │   └── IconTooling.vue
│   │   ├── TheWelcome.vue
│   │   └── WelcomeItem.vue
│   └── main.js
└── vite.config.js

This directory contains static assets that don't need processing by Vite. Files placed here will be served as-is.

The root Vue component that acts as a layout for the entire application.

A directory for static assets like CSS/SCSS files, images, or fonts that need processing.

Config file for Vite

Defines all your project's dependencies

And you have a homework!

We're done for today

  • Take a look at all the files in the initial Vue project we just created, play around it, don't be scared to break things.
  • Compare it with what you already know in JS, HTML, and CSS.
  • And lastly, go to Vue official documentation, get familiar with it, and while you're at it, read the introduction sections.

This slides deck and other resources will soon be sent to the discord server.

See you in the next lecture

Thank you!

Overflow Vue Course - 1 Introduction

By Mo Mansour

Made with Slides.com

Overflow Vue Course - 1 Introduction

  • 104

More from Mo Mansour