Comenzando

Atención acuérdate de intalar los Módulos

Instala los modulos, vete a terminal, nuevo terminal y escribe:

npm install

Prerequisitos

Descarga e instala Node.js

Descarga e instala Visual Studio Code

Instalación

1. Instalar

Descarga e instala Vue.js CLI

npm install -g @vue/cli

2. Ver la versión

vue --version

3. Actualizar

npm update -g @vue/cli

4. Creando un proyecto

• Usando una interfaz gráfica

vue ui

Instalando módulos Boostrap/Popper y Firestore

1. Instala bootstrap

Instala Bootstrap

npm i --save bootstrap@^5.1

2. Instala también Popper en algunos componentes de Bootstrap es necesario

Necesita Popper

Instala Popper

npm i @popperjs/core 

3. Copia en main.js

import "bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";

4. Instalar firebase

Docuemtación Firebase

npm install firebase

Modificando el proyecto

1. Cambiar nombre de conponente HelloWorld por Navbar

Bootstrap Navbar

2. Bootstrap copia un navbar y pégalo en el nuevo componente

3. Modifica en Home.vue import, components y etiqueta HelloWorld por Navbar y elimina la imagen.

4. Suprime en App.vue la navegación y los estilos

Firebase firestore

8. Abrir archivo main.js en la carpeta src y pegar

Para iniciar el proyecto utiliza solo estas:

import { initializeApp } from "firebase/app";
import { getFirestore } from 'firebase/firestore/lite';

const firebaseConfig = {
  apiKey: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
  authDomain: "XXXXXXXXXXXXXXXXXXXXXXXXX",
  projectId: "XXXXXXXXX",
  storageBucket: "XXXXXXXXXXXXXXXX",
  messagingSenderId: "XXXXXXXXXXXXX",
  appId: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);


export { db };

Firebase con Auth y Storage

Así quedará al final

import { initializeApp } from "firebase/app";
import { getFirestore } from 'firebase/firestore/lite';
import { getAuth } from "firebase/auth";
import firebase from 'firebase/compat/app';
import 'firebase/compat/storage';

const firebaseConfig = {
    apiKey: "AIzaSyC-yjMEOwF0FAyC4Dsi3IqZcHqoZit4gyI",
    authDomain: "tiendaarduinoes.firebaseapp.com",
    projectId: "tiendaarduinoes",
    storageBucket: "tiendaarduinoes.appspot.com",
    messagingSenderId: "386838491375",
    appId: "1:386838491375:web:518d05af8440e82cb6ab1a",
    measurementId: "G-L90G5CE35V"
  };

firebase.initializeApp(firebaseConfig);
var storage = firebase.storage();
  // Initialize Firebase
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
const auth = getAuth();

export { db, auth, storage };

GET / OBTENER DATOS / FIRESTORE

TEMPLATE / Tabla

Crea una tabla para visualizar los datos de la base de datos

Bootstrap Tablas tables

Vue.js v-for

<template>
  <Navbar/>
  <div class="container">
    <table class="table">
    <thead>
      <tr>
        <th scope="col">id</th>
        <th scope="col">Nombre</th>
        <th scope="col">Correo</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in usuarios" :key="index">
        <th scope="row">{{index}}</th>
        <td>{{item.nombre}}</td>
        <td>{{item.correo}}</td>
      </tr>
    </tbody>
    </table>
  </div>
</template>

SCRIPT / Tabla

Crea un script para obtener los datos de la base de datos

<script>
import Navbar from '../components/Navbar'
import { collection, getDocs } from 'firebase/firestore/lite';
import { db } from "../main";


export default {
  name: 'Home',
  components: {
    Navbar
  },
  data() {
    return {
      usuarios: []
    }
  },
  methods:{
  // GET / OBTENER / Consulta instantánea 
    async obtenerDatos () { 
      const querySnapshot = await getDocs(collection(db, "usuarios"));
        querySnapshot.forEach((doc) => {
        let usuario = doc.data()
        usuario.id = doc.id
        this.usuarios.push(usuario)
        console.log(usuario)
      });
    },
  },
    mounted() {
      this.obtenerDatos();
    },
}
</script>