Giter VIP home page Giter VIP logo

vue-masterclass's Introduction

The Vue 3 Masterclass

This repository contains the source code for the supercharged, remastered 2021 Vue.js 3 Masterclass course.

Weā€™ve taken all the feedback we got from The Vue.js 2 Masterclass, and supercharged The Vue.js Masterclass with all the new goodies from Vue.js 3 and the ecosystem.

This is our signature course. It is probably the most thorough Vue.js course available online.

The Vue.js Masterclass is so comprehensive that we can not cover everything on this page. Thus weā€™ve created a separate page where you can learn more about it.

In our Masterclass you'll learn Vue.js by building a real-world application. Together weā€™ll create a complete forum from scratch using exciting technologies that synergize with Vue.

The goal of the Masterclass is to teach you Vue.js along with Best Practices, Modern Javascript, and other exciting technologies, by building a Real World application - a forum.

We cover the fundamentals, like:

  • Vue cli, router, and State management with Vuex
  • Modern Javascript (ES6/7/8)
  • User permissions & Route Guards
  • Third party authentication
  • Google Cloud Firestore
  • Automatic code review with ESLint
  • Consuming REST API
  • Application architecture and best practices

We also dive into harder topics, like:

  • Higher Order Functions
  • Creating Vue Plugins
  • Code Splitting
  • Support for older Browsers
  • Webpack configuration
  • SEO and pre-rendering
  • Deployments

By completing the Vue.js Masterclass, you will be able to land any Vue related job or optimize/improve your own projects!

Intrigued? Enroll now


Project setup

yarn install

Compiles and hot-reloads for development

yarn serve

Compiles and minifies for production

yarn build

Lints and fixes files

yarn lint

Customize configuration

See Configuration Reference.


Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

Looking for Firebase 9?

Since the video course was created, Firebase has released a new version of it's JavaScript SDK. If you'd like to see code changes using Firebase 9 checkout the firebase-9 branch, courtesy of Michael Haslam. Thanks Mike!

Looking for Composition API, Pinia, TypeScript, etc?

Since this video course was created, a lot has changed in the Vue.js ecosystem. We have a brand new Master Class geared towards addressing and teaching these updated technologies (WIP as of Q1 2024). We've had an amazing community member complete this course however, with these latest technologies. You can see his source code in this github repo. Thanks JƩrƩmie!

vue-masterclass's People

Contributors

danielkellyio avatar hootlex avatar rahaug avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

vue-masterclass's Issues

Catching possible erros inside /thread routes (404)

I just add this after the last router path
{
path: '/thread/:id/:pathMatch(.)',
name: 'NotFound',
component: PageNotFound
} //

It will catch all wrong routes inside /thread and redirect to the Not Found page

API Key Expired

When I run the app locally and try to Register I get an error in Dev Tools console:
message: "{\"error\":{\"code\":400,\"message\":\"API key expired. Please renew the API key.\",\"errors\":[{\"message\":\"API key expired. Please renew the API key.\",\"domain\":\"global\",\"reason\":\"badRequest\"}],\"status\":\"INVALID_ARGUMENT\",\"details\":[{\"@type\":\"type.googleapis.com/google.rpc.ErrorInfo\",\"reason\":\"API_KEY_INVALID\",\"domain\":\"googleapis.com\",\"metadata\":{\"service\":\"identitytoolkit.googleapis.com\"}}]}}"
Do I need to make any changes on my side? Thanks!

Strange behavior of the VueSchool.io

Hello!
You, Vue School, provide the functionality of subscriptions to your courses and link a bank card to payment methods, but you do not give the functionality of unsubscribing from courses and deleting a bank card from my personal account on your site. Or you have deliberately hidden this functionality so that it is difficult to find it on your site. This looks like a scam, because you are trying to charge money from my card and do not respond to an email about how to unsubscribe from subscriptions to your courses.
How do I unsubscribe from your courses?
How can I stop your attempts to debit money from my bank card?
How do I delete a bank card from my personal account on your website?

Source code portions relying on firebase doesn't work with firebase v9

The whole Firebase series in the videos is not working (as of December 2021). Thatā€™s because the install instructions provided in these Vue School videos (ā€œnpm install ā€”save firebaseā€) now installs version 9 of Firebase. Version 9 (I have discovered after grinding through research the past several hours), now installs what is named ā€œModular SDKā€. That version uses different terminology than previous versions, so nothing with firebase as described in these Vue School videos works with version 9 installed.

For instance, writing ā€œimport firebase from ā€˜firebaseā€™ and ā€œfirebase.initializeAppā€ in main.js DOES NOT WORK with version 9. Instead, you have to type ā€œimport { initializeApp } from 'firebase/app'ā€ and ā€œinitializeApp(firebaseConfig).

Likewise, the video (and source code) instructions for ThreadShow in this video returns an error because you canā€™t use ā€œimport firebase from ā€˜firebaseā€™ā€ in the script tag. I havenā€™t figured out what you do instead.

To code along with the videos, you need to install firebase v 8. After 3 hours of research, I havenā€™t figured out how to install version 8 (Googleā€™s site is devoid of info on this). Iā€™m guessing itā€™s something like npm i firebase@8 or something like that.

This is defcon 1 stuff that Vue School needs to fix right away. The series comes to a screeching halt otherwise

Licensing

Hi there,

Thanks for the amazing detailed course. Just wanted to understand the licensing of this final repo - MIT?

Are you able to update the licensing details? Thanks bunch!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    šŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. šŸ“ŠšŸ“ˆšŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ā¤ļø Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.