Vue 3 using Composition API, Tailwind CSS and Firebase

Basic to Pro

4.20 (5 reviews)
Udemy
platform
English
language
Web Development
category
instructor
Vue 3 using Composition API, Tailwind CSS and Firebase
31
students
9 hours
content
Jan 2022
last update
$59.99
regular price

What you will learn

Usage of Vue composition API for robust web app development

ATOMIC design for web development

Firebase Authentication and Deploying Vue 3 project on AWS Amplify

Integrating Tailwind CSS with Vue 3

Description

This course is structured in such a way that someone with a basic understanding of HTML, CSS and JavaScript could master the Vue.js framework.

  • The course begins with basic theoretical concepts like 3 tier architecture, Single Page Application, Server Side rendering.

  • Then the next section is about installing Node.js, npm and Vue CLI and creating a project using Vue CLI.

  • Then the next section covers all the basics of Vue right from project structure, how Vue code works to all the features and properties required to create a Vue 3 application. Each concept is explained well and in as simple words as possible.

  • Then the next section is all about the action of coding. First, we will see how to install Tailwind CSS and use it in Vue 3 with JIT mode, then how to create a Firebase project and lastly it is all about coding an app with a proper firebase authentication system. I have been coding web applications for various sizes of companies for 6+ years. I will be putting in all my experience and learning to create this app so that you could also use it to develop your next portfolio or your dream project.

  • Please note that this app is developed completely client-side using serverless logic of Firebase and APIs. However, you could use the same client-side logic and substitute Firebase APIs with your own APIs as per your API logic.

About the App

This is app is for educational purposes and is meant to be used ethically.

We will be creating a Vue 3 app that will take an IP address and will make an API call to get the details of that IP address. Using Google Maps API we will then plot the location of that IP on the map.

We will be then deploying this app on AWS Amplify using Github.

This app is developed with line by line code explanation. We will be login in, login out and registering the user using Firebase Auth API and will also put a navigation guard on the route so that only authenticated users could use our IP app. We are storing user details in Vuex and hydrating the store on page refresh.


The mastery time for this course depends from person to person but if you take and study this course properly then you could at least use Vue comfortably for any projects. Of course, some practice will be required from your side but this course will give a clear direction and understanding of  Vue 3 and composition API.


Disclaimer for the course

All the information provided in this course is published in good faith and for general information purpose only. The course is created by using personal learnings and experience additionally referring to online resources, official documentation of Vue 3, Firebase, Tailwind CSS.

However, I do not make any warranties about the completeness, reliability and accuracy of this information. Any action you take upon the information you find in this course (Vue 3 using Composition API, Tailwind CSS and Firebase), is strictly at your own risk. I will not be liable for any losses and/or damages in connection with the use of this course.


Aditya :)

Content

Introduction

Introduction
3 tier architecture
Quick quiz on 3 Tier Architecture
SPA, SSR
What is Vue.js?

Creating Vue Project

Installing Node.js, npm and vue cli
Creating Vue project with Vue CLI
Project directory and role of each file
Quick Quiz on Lecture 5, 6 and 7
Running and understanding the initial code

Understanding the basics

Props
Data Binding (v-model, ref, toRef, reactive)
Computed Properties and Watcher
Directives
Lifecycle hooks
These questions are based on lecture 9-13.

Creating an app using Vue 3 composition API, Vuex, Tailwind CSS and Firebase

Installing Tailwind
Creating Firebase project
Coding the app Phase 1
Coding the app Phase 2
Coding the app Phase 3 - Middleware/Navigation Guards
Coding the app Phase 4 - Final touch ups, unit testing and deployment

Reviews

Richard
September 14, 2021
All in all a pretty decent course. Two things that would improve it would be to 1. add source code as a resource at the start and end of each section. 2. break the tutorials into smaller chunks to allow students to go back and find relevant points easily.

Charts

Price

Vue 3 using Composition API, Tailwind CSS and Firebase - Price chart

Rating

Vue 3 using Composition API, Tailwind CSS and Firebase - Ratings chart

Enrollment distribution

Vue 3 using Composition API, Tailwind CSS and Firebase - Distribution chart
4282500
udemy ID
9/5/2021
course created date
9/13/2021
course indexed date
Bot
course submited by