Quasar/Vuejs/Firebase

General

Update to latest quasar version:

npm i -g @quasar/cli@latest

Lessons Learned

The best approach is to use Firestore directly in the app without a nodejs backend for most things. Vuexfire seems to be a good candidate to abstract a lot of hassle away for this.

Backend Query from .vue File:

methods: {
    getPosts() {     
      this.$axios
        .get(`${process.env.API}/posts`, {
          headers: { Authorization: this.$q.localStorage.getItem("token") },
        })
        .then((resp) => {
          this.posts = resp.data;
        })
        .catch((error) => {
          if (error.response) {
            if (error.response.status == 403) {
              this.$q.localStorage.remove("loggedIn");
              this.$q.localStorage.remove("token");
              this.$router.push("/auth").catch((err) => {console.log(err)});
            }
          }
        });
    },

When commiting to git, include .postcssrc.js manually or the quasar app will break.

JS Promises

A more elegant way to write asynchronous functions without using .then and .catch is this format:

const funcName = async() => {
    const a = getA()
    const b = getB()
    const c = await Promise.all([a,b])
    return c
}

You could also await getA() and getB() separately, but they would not execute in parallel like in the example. This is useful if the value of B depends on A.

A good explanation can be found here: https://www.youtube.com/watch?v=vn3tm0quoqE