feat(docs): add complete Vue 2 and Vue 3 examples to docs

[mesqueeb]

open questions:

• Should/can the example be interactive and live in an example section?
• Should the example be a different kind of mini file browser where you see file name list at the right and the file content on the left?
• Should the example include user auth (because in eg. a todo list this would be a requirement)
• Should I link to repo links to Vue 2 / Vue 3 / Vue3+Firestore examples?
• Should I add example repo with Firestore+Vue2?

[OliverJEvans]

I would be interested in the auth example here.

I'm finding myself doing some hybrid Pinia thing, where I sign in with firebase/auth, get the uid and store it in Pinia (I guess this could also be local storage etc). Then when I want the user doc, I use the UID in pinia to getch the users document.

This screams anti-pattern to me but I'm unsure what the intended implementation would be, my firebase experience isn't that great.

Here's kinda what I'm doing at the moment

import { mapState } from "pinia";
import { useAuthStore } from "@/stores/auth";
import { magnetar } from "@/firebase/setup.js";

export default {
  data() {
    return {
      userDoc: null,
    };
  },
  created() {
    this.userDoc = magnetar.collection("users").doc(this.user.uid);
    this.userDoc.stream().catch((error) => {
      console.log(error);
    });
  },
  beforeDestroy() {
    this.userDoc.closeStream();
  },
  computed: {
    ...mapState(useAuthStore, ["user"]),
  },
  methods: {
    handleButtonClick() {
        this.userDoc.merge({...});
    },
  },
};