Vue 3 & Quasar Framework: Social Media App 2026

Learn Vue 3, Quasar Framework, Authentication, Chat, Notifications, State Management, and Responsive UI

Created byAhmed Khalaf Elsayed

Last updated 8/2026

English

ArabicEnglish [Auto],

What you'll learn

Build a complete social media application using Vue 3 and Quasar Framework
Create modern and responsive user interfaces
Implement user authentication and authorization
Build reusable Vue components
Manage application state using Vuex
Connect frontend applications to REST APIs
Create protected routes and route guards
Implement follow and unfollow functionality
Create and manage user profiles
Build a complete posts system (create, update, delete, and pagination)
Implement real-time chat features
Create notification systems
Handle API requests and error handling properly
Build mobile-friendly applications
Improve user experience with responsive layouts
Implement refresh token authentication flows
Organize large Vue applications using best practices
Deploy and maintain production-ready frontend applications

Course content

4 sections • 69 lectures • 19h 36m total length

Introduction1:34
Overview of the course structure and what we will build throughout this full-stack journey.

Section Summary2:02
Quick recap of the key concepts covered in this section before moving forward.
Tools & Programs12:37
Setting up the essential tools required for backend and frontend development.
Install Node4:01
Install node.js, a free open source cross-platform JavaScript runtime, on Windows using chocolatey, verify versions with node -v, npm -v, and yarn -v.
Install Vue Cli0:56
Setting up Vue CLI to scaffold and manage the frontend application.

Overview & GitHub Resources0:11
Understanding frontend architecture and project structure.
! IMPORTANT RUN First Version OF Backend0:08
Run Backend5:22
1 Create The app add Quasar Freamwork install Nesesary Packages7:16
Learn to spin up a Vue 3 social media app by installing Quasar with the CLI, adding Vue Router, Vuex, and Axios, selecting Eva icons, and configuring port 80.
2 Create Navbar Component28:34
Create a responsive navbar with Quasar in a Vue 3 app, wiring a q layout and q page container to host a nav bar, search, icons, and a profile dropdown.
3 Create ALL User EndPoint Handlers API10:57
Connecting frontend API handlers to backend services.
4 Build Authentication Store23:25
Creating centralized state management for authentication.
5 AuthVeiw Template25:36
Designing the authentication UI layout.
6 AuthVeiw Script36:38
Implementing authentication logic inside the component.
7 Fix AuthVeiw Error Catching Bug3:58
Improving error handling in authentication flow.
8 Update NavBar And Create UserProfile18:57
Enhancing navigation and building the profile page.
9 Nun Authenticated Route Garud3:43
Protecting routes based on authentication status.
10 Create User Store11:57
Managing user state globally using store pattern.
11 Show User Component40:52
Displaying user data dynamically in UI.
12 Follow And UnFollow Users16:32
Connecting follow logic between frontend and backend.
13 Update User Data Profile27:14
Allowing profile updates from the frontend.
Post Requests Methods9:40
Handling POST requests for various features.
Create Post Store22:28
Managing post state inside application store.
Create Post Script20:53
Implementing post creation logic.
Create Post Template32:04
Designing the post creation UI.
GetPosts With Pageination22:59
Displaying paginated posts in the UI.
Post ShowUpdateDeatils Compnont Script31:34
Handling post update and detail logic.
Show Post Template29:03
Rendering post content dynamically.
Edit Post PostDeatils Component20:13
Implementing post editing functionality.
Show User Post in Profile Page4:48
Displaying user-specific posts on profile page.
SideBar Compoennt8:36
Building the sidebar UI component.
Fix Bug0:53
Resolving minor UI or logic issues.
RightBar compnoont Sugessted Frinds14:37
Showing suggested friends dynamically.
Search Component27:57
Implementing search functionality in frontend.
Nofification Store11:22
Managing notification state in frontend.
Fix Error0:35
Debugging and fixing frontend issues.
Create Notification Component31:36
Building notification display UI.
Notification Number On NavBar5:41
Displaying notification counter badge.
Chat Api Methods9:29
Connecting chat-related API endpoints.
Chat Store17:48
Managing chat state and conversations.
Add Chat Route NavBar7:38
Integrating chat route into navigation.
Chat Component Script43:10
Implementing chat logic and interactions.
Chat Component Template24:16
Designing the chat user interface.
Fix Chat Bugs12:34
Debugging chat-related issues.
Messages Number On NavBar4:39
Displaying unread message counter.
User Image On NavBar2:24
Rendering authenticated user avatar.
Update GitHup Repo App git Version5:58
Committing and synchronizing frontend updates.

Overview & GitHub Resources0:10
Introduction to the application upgrade phase.
IMPORTANT RUN Upgraded Verstion of the Backend Side0:05
Run Backend V21:31
App Overview8:20
Reviewing system behavior before applying upgrades.
Upgrade AppBar45:49
Improving UI responsiveness and mobile compatibility.
dinamic posts scrolling27:24
Implementing dynamic scrolling for smoother post loading experience.
Upgrade Chat Compnont ( mobile frendlly )20:31
Enhancing chat UI for better mobile responsiveness.
Update Create Post Compnont35:03
Improving post creation workflow and UI structure.
Upgrade Auth Component38:44
Refactoring authentication component for better UX and validation.
Update Post Script Frontend42:00
Refactoring frontend post handling logic.
Upgrade Update Post Template FrontEnd38:09
Improving UI structure for post updates.
update PostDeatils Frontend16:26
Enhancing post detail display and interactions.
Update Notificaton Fix bug Frontend11:42
Debugging and stabilizing notification behavior.
Update User Store FrontEnd23:01
Refactoring user state management logic.
Update UserProfile Script FrontEnd32:50
Improving profile interaction logic.
Updae UserProfile Template FE41:59
Enhancing profile UI layout and responsiveness.
Fix Profile Posts Bugs Frontend14:01
Resolving display and state issues in profile posts.
Implement And Test RealTime Notification After Upgraded17:44
Validating notification behavior after integration.
Testing The RealTime Chat After Upgraded2:27
Ensuring chat stability after architectural changes.
Debug App After Upgrade Phase One27:45
Fixing issues introduced during upgrade phase.
Add Refresh Token And Data For User24:57
Enhancing authentication with refresh token support.
Check Main Course ( Full Software Engineering Course )0:04

Requirements

Basic knowledge of HTML, CSS, and JavaScript
No prior Vue 3 experience required (helpful but not mandatory)

Description

Welcome to Vue 3 & Quasar: Build a Social Media App From Scratch.

In this project-based course, you will learn how to build a complete social media application using Vue 3 and the Quasar Framework.

Rather than spending hours on theory, we will focus on building a real-world application step by step. Throughout the course, you will create features commonly found in modern social platforms, including authentication, user profiles, posts, notifications, messaging, and responsive mobile-friendly interfaces.

We begin by setting up the development environment and installing all required tools. From there, we will build the frontend application using Vue 3, Quasar Framework, Pinia state management, and REST API integration.

During the course, you will learn how to create reusable components, manage application state, handle API requests, protect routes, build authentication systems, implement pagination, create notification systems, and develop a complete chat experience.

After building the initial version of the application, we will continue by upgrading the project to support responsive layouts and mobile devices. You will also learn how to improve user experience, optimize application structure, and implement refresh token authentication.

By the end of this course, you will have built a complete social media application that can be used as a portfolio project and a foundation for your own future applications.

Whether you are new to Vue 3 or looking to strengthen your frontend development skills, this course will provide practical experience through a real-world project that mirrors modern application development practices.

Who this course is for:

Beginner to intermediate frontend developers
Developers who want to learn Vue 3
Developers interested in Quasar Framework
Students who learn best by building real projects
React or Angular developers who want to learn Vue
Freelancers looking to build modern web applications
Software engineers who want practical Vue experience
Anyone interested in creating social media applications

Vue 3 & Quasar Framework: Social Media App 2026

What you'll learn

Explore related topics

Course content

Introduction1 lecture • 2min

Tools & Environment4 lectures • 20min

( Quasar & Vue ) - Build The App42 lectures • 11hr 24min

Upgrade The App ( Mobile Friendly )22 lectures • 7hr 51min

Requirements

Description

Who this course is for: