Build Web Apps with Vue JS 3 & Firebase from Udemy

What's inside

Learning objectives

Learn how to create vue 3 applications from the ground-up
Get in-depth knowledge of vue features like the vue router, vue cli, options api, composition api, teleport etc
Get hands-on & in-depth experience using the latest vue 3 features (such as the composition api)
Learn how to use firebase as a back-end to your vue applications (as a database, authentication service, hosting etc)

Build & deploy 4 real-world web apps with vue & firebase
Learn how to implement an authentication system into your vue js apps using firebase auth
Become a vue 3 ninja!

Learn how to create vue 3 applications from the ground-up
Get in-depth knowledge of vue features like the vue router, vue cli, options api, composition api, teleport etc
Get hands-on & in-depth experience using the latest vue 3 features (such as the composition api)
Learn how to use firebase as a back-end to your vue applications (as a database, authentication service, hosting etc)
Build & deploy 4 real-world web apps with vue & firebase
Learn how to implement an authentication system into your vue js apps using firebase auth
Become a vue 3 ninja!

Syllabus

In this chapter, we'll take a quick look at what Vue is & setup our working environment. I'll also show you how to use the course files for the rest of the course.

What is Vue?

New Features in Vue 3

What You Should Already Know

Environment Setup

Course Files

In this chapter we'll be covering the basics of Vue - how to set it up in a web page, how to create a Vue component & how to use the component to make your web page dynamic & interactive.

How to use Vue (using the CDN)

Creating a Vue App

Templates & Data

Methods & Click Events

Conditional Rendering

Other Mouse Events

Outputting Lists (v-for)

Attribute Binding

Dynamic Classes

CHALLENGE - Add to Favs

SOLUTION - Add to Favs

Computed Properties

In this chapter we'll learn all about the Vue CLI (command line interface) & how we can use it to generate bigger Vue applications.

Why Use the Vue CLI?

How to Use the Vue CLI

New Project Walkthrough

Vue Files & Templates

Template Refs

Multiple Components

Component Styles & Global Styles

Passing Data with Props

Emitting Custom Events

Click Event Modifiers

Slots

CHALLENGE - Reusing Components

Using Teleport

In this chapter we'll build our first small project - a reaction timer - which puts together everything we've learnt so far, as well as a couple of extra things (lifecycle hooks)

Project 1 Preview & Setup

Starting a New Game

Component Lifecycle Hooks

Creating the Reaction Timer

Emitting Custom Events with Data

CHALLENGE - Showing a Results Component

Finishing Touches

In this chapter we'll take a close look at forms & see how to track what a user types into input fields (& selects from dropdowns and checkboxes).

Forms Intro & Setup

Two-way Data Binding

Select Fields

Checkboxes

Keyboard Events & Modifiers

CHALLENGE - Deleting Skills

Submitting the Form

In this chapter we'll look at how we can add multiple pages to our applications using the Vue Router.

Why Use the Vue Router?

Router Setup for New Projects

Router Links

Folder Structure

Route Parameters

Dynamic Links

404 Pages & Redirects

Programmatic Navigation

Lazy Loading Components

In this chapter we'll see how to fetch data (using JSON Server) within Vue components.

Using JSON Server

Where to Fetch Data

Conditionally Showing Data

Here we'll start our second project of the course - a project/task manager - using everything we've learnt so far.

Project 2 Preview & Setup

Home View & Data

Single Project Template

Using Material Icons

Deleting Projects

Completing Projects

New Project Form

Adding New Projects

Navbar Component

Edit Project Route

CHALLENGE - Updating Projects

Creating a Filter Nav

CHALLENGE - Showing Filtered Projects

In this chapter, we'll dive into one of the biggest new Vue 3 updates - the composition API - & see how we can use it to structure our components & code in a more logical & reusable way.

Drawbacks of the Options API

Composition API Basics

Template Refs in the Setup Function

Using Refs for Reactivity

Refs vs Reactive

Computed Values in the Setup Function

Using watch and watchEffect

Using Props in the Setup Function

Lifecycle Hooks

In this chapter we'll see how to work with async code (fetch requests) to get data and inject it into our components, using the composition API

Fetching Data in the Setup Function

Reusable Composition Functions (Composables)

Creating Another Composable

Creating a Loading Spinner

Making a Web Form

CHALLENGE - Making a POST Request

Future Async Lesson & Extra Styling

In this chapter we'll see how to work with the Vue Router when using the Composition API to move through history, get route params & redirect users.

Routing Recap & Navbar

Using useRouter

Using useRoute

CHALLENGE - Creating a Tag Route

Good to know

Know what's good

, what to watch for

, and possible dealbreakers

Builds a foundation for novice learners in Vue and Firebase

Focuses on Vue 3 to prepare students for current industry practices

Taught by Shaun Pelling, a recognized instructor on the Net Ninja YouTube channel

Develops comprehensive skill sets in Vue and Firebase for building full-stack applications

Emphasizes practical experience through hands-on projects to reinforce learning

Suitable as an introductory course for those with no prior Vue or Firebase experience

Reviews summary

Well received: great instructor & concise content

Learners say this course is well received and an excellent introductory to learning Vue.js from an amazing instructor. Vue.js beginners appreciate the easy-to-understand explanations and concise content that allows them to quickly grasp the basics of Vue.js.

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Build Web Apps with Vue JS 3 & Firebase with these activities:

Review the documentation for the Vue Router

Show steps

Revisit the official documentation for the Vue Router to refresh your understanding of how to manage routes and navigate in Vue 3 applications.

Browse courses on Vue Router

Show steps

Locate the Vue Router documentation
Review the main concepts and features of the Vue Router
Read about specific topics that you need to strengthen your knowledge

Solve Vue 3 coding challenges on LeetCode or HackerRank

Show steps

Practice solving coding challenges in Vue 3 to improve your problem-solving skills and reinforce your understanding of the framework.

Browse courses on Vue 3

Show steps

Choose a coding challenge platform
Solve coding challenges in Vue 3
Review your solutions and identify areas for improvement
Repeat the process regularly

Join a study group or online forum for Vue 3 developers

Show steps

Engage with other Vue 3 developers to discuss best practices, troubleshoot issues, and share knowledge.

Browse courses on Vue 3

Show steps

Find a study group or online forum for Vue 3 developers
Join the community and actively participate in discussions
Ask questions, share your experiences, and help others
Stay updated on the latest Vue 3 developments and trends

Five other activities

Expand to see all activities and additional details

Show all eight activities

Build a simple Vue 3 app using the Vue CLI

Show steps

Use the Vue CLI to create a basic Vue 3 application and familiarize yourself with its structure and basic functionality.

Show steps

Install the Vue CLI
Create a new Vue 3 project
Add a simple component to your app
Create a route using Vue Router
Add a form to your app and handle user input

Attend a workshop on advanced Vue 3 features

Show steps

Participate in a workshop to learn about advanced Vue 3 features, such as the Composition API, Teleport, and Suspense.

Show steps

Find and register for a workshop on advanced Vue 3 features
Attend the workshop and actively participate in discussions
Take notes and ask questions to clarify your understanding
Apply what you learned in your own Vue 3 projects

Write a blog post about the benefits of using Vue 3 for building web applications

Show steps

Summarize the advantages of using Vue 3 for web development, such as its ease of use, reactivity, and performance.

Show steps

Research the key features and benefits of Vue 3
Outline the main points of your blog post
Write a draft of your blog post
Edit and revise your blog post
Publish your blog post online

Build a small Vue 3 project and deploy it to Netlify

Show steps

Develop a simple Vue 3 application and deploy it to Netlify for hosting, gaining practical experience in deploying web applications.

Show steps

Plan and design your Vue 3 project
Create and implement your Vue 3 application
Create a Netlify account and configure your project
Deploy your Vue 3 application to Netlify
Test your deployed application and make any necessary adjustments

Develop a Vue 3 application for managing tasks

Show steps

Create a Vue 3 application to manage tasks, including CRUD operations, filtering, and sorting.

Show steps

Plan the app's architecture and data model
Implement the app's user interface using Vue components
Integrate Firebase as a back-end to handle data storage and authentication
Add features such as drag-and-drop, filtering, and sorting
Test and debug the application

Career center

Learners who complete Build Web Apps with Vue JS 3 & Firebase will develop knowledge and skills that may be useful to these careers:

Front-End Developer

In the tech industry, Front End Developers are highly sought after for their ability to bring websites and web applications to life. As a Front End Developer, you will utilize cutting-edge technologies, such as Vue.js and Firebase, to create user interfaces and enhance the overall user experience. Vue.js 3 & Firebase is an ideal course to propel your career forward as you immerse yourself in industry-leading tools and best practices. This course's curriculum will equip you with the skills to excel in this role, from building dynamic and interactive web applications to implementing authentication and deploying your creations seamlessly.

See salaries and explore the career path for Front-End Developer

Web Developer

Web Developers are in high demand due to the increasing reliance on digital platforms and online experiences. As a Web Developer, you will leverage your knowledge of Vue.js 3 and Firebase to develop and maintain websites and web applications that meet the evolving needs of users. This course offers a comprehensive foundation, providing you with the skills to create engaging user interfaces, manage data effectively, and deploy your projects with confidence. Mastering the concepts covered in this course will enhance your competitiveness in the job market and empower you to succeed as a Web Developer.

See salaries and explore the career path for Web Developer

Full-Stack Developer

Full Stack Developers are highly skilled professionals who possess expertise in both front-end and back-end development. This course is an excellent starting point for aspiring Full Stack Developers who want to master Vue.js 3 for front-end development and Firebase for back-end functionality. Through hands-on projects and in-depth explanations, you will gain a comprehensive understanding of the full stack development process, enabling you to build complete web applications from scratch.

See salaries and explore the career path for Full-Stack Developer

Software Engineer

Software Engineers are responsible for designing, developing, and maintaining software systems. With a strong understanding of Vue.js 3 and Firebase, you can specialize in web development and contribute to the creation of robust and scalable software solutions. This course provides a solid foundation in the fundamentals of Vue.js 3, the latest features of the Composition API, and the practical application of Firebase. By completing this course, you will gain valuable skills that will make you a sought-after candidate in the competitive field of Software Engineering.

See salaries and explore the career path for Software Engineer

Web Designer

Web Designers are responsible for creating the visual and user experience of websites and web applications. By mastering Vue.js 3, you can elevate your designs with interactivity and dynamic content. This course will provide you with a strong foundation in Vue.js 3, enabling you to create visually appealing and user-friendly interfaces that meet the needs of modern web users. Whether you aspire to specialize in front-end development or complement your design skills, this course will empower you to create stunning web experiences.

See salaries and explore the career path for Web Designer

Mobile Developer

Mobile Developers are in high demand as the use of smartphones and tablets continues to grow. While this course focuses on web development, the principles and concepts of Vue.js 3 can be applied to mobile application development as well. By understanding the fundamentals of Vue.js 3, you can gain a competitive edge in the mobile development industry and create innovative and engaging mobile applications that meet the ever-changing needs of users.

See salaries and explore the career path for Mobile Developer

Database Administrator

Database Administrators are responsible for managing and maintaining databases. While this course focuses on web development, the concepts of Firebase, a NoSQL database, can be beneficial for aspiring Database Administrators. By understanding the principles of NoSQL databases and how to use Firebase effectively, you can gain valuable insights into the world of data management and enhance your competitiveness in the field of Database Administration.

See salaries and explore the career path for Database Administrator

IT Project Manager

IT Project Managers are responsible for planning, executing, and delivering IT projects successfully. This course may be helpful for aspiring IT Project Managers who want to gain a better understanding of web development technologies. By learning Vue.js 3 and Firebase, you can develop a more well-rounded understanding of the technical aspects of IT projects, enabling you to make informed decisions and effectively manage web development initiatives.

See salaries and explore the career path for IT Project Manager

Quality Assurance Analyst

Quality Assurance Analysts are responsible for testing and ensuring the quality of software products. This course may be helpful for aspiring Quality Assurance Analysts who want to specialize in testing web applications. By learning Vue.js 3 and Firebase, you can gain a better understanding of the technical aspects of web development, enabling you to develop effective test cases and identify potential issues in web applications.

See salaries and explore the career path for Quality Assurance Analyst

Technical Writer

Technical Writers are responsible for creating user manuals, technical documentation, and other written materials. This course may be helpful for aspiring Technical Writers who want to specialize in writing documentation for web applications. By learning Vue.js 3 and Firebase, you can gain a deeper understanding of the technical aspects of web development, enabling you to create clear and concise documentation that effectively guides users through the functionality and usage of web applications.

See salaries and explore the career path for Technical Writer

Product Manager

Product Managers are responsible for managing the development and launch of products. This course may be helpful for aspiring Product Managers who want to gain a better understanding of web development technologies. By learning Vue.js 3 and Firebase, you can develop a more well-rounded understanding of the technical aspects of product development, enabling you to make informed decisions and effectively manage web development initiatives.

See salaries and explore the career path for Product Manager

UX Designer

UX Designers are responsible for designing the user experience of websites and web applications. This course may be helpful for aspiring UX Designers who want to gain a better understanding of front-end development technologies. By learning Vue.js 3, you can develop a more well-rounded understanding of the technical aspects of UX design, enabling you to create user interfaces that are both visually appealing and user-friendly.

See salaries and explore the career path for UX Designer

Business Analyst

Business Analysts are responsible for analyzing and understanding business needs. This course may be helpful for aspiring Business Analysts who want to gain a better understanding of web development technologies. By learning Vue.js 3 and Firebase, you can develop a more well-rounded understanding of the technical aspects of web development, enabling you to effectively communicate with technical teams and translate business requirements into technical specifications.

See salaries and explore the career path for Business Analyst

Data Analyst

Data Analysts are responsible for collecting, analyzing, and interpreting data. This course may be helpful for aspiring Data Analysts who want to gain a better understanding of web development technologies. By learning Firebase, you can develop a more well-rounded understanding of the technical aspects of data management and analysis, enabling you to effectively work with data from web applications.

See salaries and explore the career path for Data Analyst

Project Manager

Project Managers are responsible for planning, executing, and delivering projects successfully. This course may be helpful for aspiring Project Managers who want to gain a better understanding of web development technologies. By learning Vue.js 3 and Firebase, you can develop a more well-rounded understanding of the technical aspects of project management, enabling you to effectively manage web development projects.

See salaries and explore the career path for Project Manager