Tutorial Vue.js Firebase: Cómo construir una aplicación CRUD paso a paso

En este tutorial Vue.js Firebase aprenderás a crear una aplicación CRUD (Crear, Leer, Actualizar, Eliminar) usando Vue.js para el frontend y Firebase como backend. Este tutorial está diseñado para desarrolladores principiantes e intermedios que desean iniciar en el desarrollo frontend con Vue.js e integrar Firebase Firestore para almacenamiento y autenticación básica.

¿Qué vamos a construir?

Una aplicación web simple donde los usuarios pueden crear, ver, actualizar y eliminar notas. Utilizaremos:

Vue.js para el desarrollo frontend
Firebase Firestore para almacenar las notas
Firebase Authentication para manejo de usuarios (autenticación básica con email y contraseña)

Este proyecto será una base sólida para aprender las funcionalidades esenciales de desarrollo frontend Vue.js y el uso de Firebase como backend, perfecto para dominar el tema con ejemplos reales.

Configuración del entorno

Para comenzar, asegúrate de tener instalado lo siguiente:

Node.js y npm (v14 o superior recomendado)
Editor de código (recomiendo VS Code)
Cuenta de Firebase (crea una en Firebase Console)

Instalación de Vue CLI

Abre la terminal e instala Vue CLI globalmente si no lo tienes:

npm install -g @vue/cli

1 2	npm install -g @vue/cli

Verifica la instalación:

vue --version

1 2	vue --version

Deberías ver un número de versión.

Creación del proyecto Vue.js

Vamos a crear un nuevo proyecto con Vue 3:

vue create vue-firebase-crud

1 2	vue create vue-firebase-crud

Elige la opción Default (Vue 3, Babel, ESLint)
Navega dentro del proyecto:

cd vue-firebase-crud

1 2	cd vue-firebase-crud

Arranca el servidor de desarrollo para comprobar que todo funciona:

npm run serve

1 2	npm run serve

Abre http://localhost:8080 en tu navegador, verás la página inicial de Vue.

Configuración de Firebase y Firestore

Crear un proyecto en Firebase Console

Entra en Firebase Console.
Haz clic en Agregar proyecto y sigue los pasos.
Una vez creado, accede al panel del proyecto.

Agregar Firestore

En el menú lateral, selecciona Firestore Database.
Haz clic en Crear base de datos.
Elige el modo prueba para desarrollo (permite leer/escribir sin reglas estrictas).
Selecciona la ubicación cerca de ti.

Configurar Authentication

Selecciona Authentication en el menú lateral.
Ve a la pestaña Método de inicio de sesión.
Habilita Correo electrónico y contraseña.

Obtener configuración para Web

En el panel principal, haz clic en el icono de configuración (engranaje) > Configuración del proyecto.
En la sección Tus apps, haz clic en </> para registrar una app web.
Escribe el nombre (ejemplo: vue-crud-app) y registra la app.
Firebase generará un snippet con la configuración:

const firebaseConfig = {
  apiKey: "API_KEY",
  authDomain: "PROJECT_ID.firebaseapp.com",
  projectId: "PROJECT_ID",
  storageBucket: "PROJECT_ID.appspot.com",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID"
};

const firebaseConfig = {

apiKey: "API_KEY",

authDomain: "PROJECT_ID.firebaseapp.com",

projectId: "PROJECT_ID",

storageBucket: "PROJECT_ID.appspot.com",

messagingSenderId: "SENDER_ID",

appId: "APP_ID"

};

Guárdalo para usarlo luego.

Integración de Firebase en Vue.js

Ahora integraremos Firebase en nuestro proyecto.

Instalar Firebase SDK

Desde la raíz del proyecto, instala Firebase:

npm install firebase

1 2	npm install firebase

Crear archivo de configuración

Dentro de la carpeta src, crea un archivo firebase.js:

// src/firebase.js
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
import { getAuth } from "firebase/auth";

const firebaseConfig = {
  apiKey: "API_KEY",
  authDomain: "PROJECT_ID.firebaseapp.com",
  projectId: "PROJECT_ID",
  storageBucket: "PROJECT_ID.appspot.com",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID"
};

// Inicializar Firebase
const app = initializeApp(firebaseConfig);

// Inicializar servicios para Firestore y Auth
const db = getFirestore(app);
const auth = getAuth(app);

export { db, auth };

// src/firebase.js

import { initializeApp } from "firebase/app";

import { getFirestore } from "firebase/firestore";

import { getAuth } from "firebase/auth";

const firebaseConfig = {

apiKey: "API_KEY",

authDomain: "PROJECT_ID.firebaseapp.com",

projectId: "PROJECT_ID",

storageBucket: "PROJECT_ID.appspot.com",

messagingSenderId: "SENDER_ID",

appId: "APP_ID"

};

// Inicializar Firebase

const app = initializeApp(firebaseConfig);

// Inicializar servicios para Firestore y Auth

const db = getFirestore(app);

const auth = getAuth(app);

export { db, auth };

Recuerda reemplazar las variables con tus credenciales obtenidas en Firebase.

Creación de componentes Vue para CRUD

Vamos a construir un componente que muestre una lista de notas, y permita crear, editar y eliminar.

1. Crear un componente `Notes.vue`

Dentro de src/components/, crea Notes.vue:

<template>
  <div>
    <h2>Mis Notas</h2>

    <form @submit.prevent="addNote">
      <input v-model="newNote" placeholder="Escribe una nota" required />
      <button type="submit">Agregar</button>
    </form>

    <ul>
      <li v-for="note in notes" :key="note.id">
        <div v-if="editId !== note.id">
          {{ note.text }}
          <button @click="startEdit(note)">Editar</button>
          <button @click="deleteNote(note.id)">Eliminar</button>
        </div>

        <div v-else>
          <input v-model="editText" />
          <button @click="updateNote(note.id)">Guardar</button>
          <button @click="cancelEdit">Cancelar</button>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { ref, onMounted } from "vue";
import {
  collection,
  addDoc,
  getDocs,
  updateDoc,
  doc,
  deleteDoc,
  onSnapshot
} from "firebase/firestore";
import { db } from "../firebase";

export default {
  name: "Notes",
  setup() {
    const newNote = ref("");
    const notes = ref([]);
    const editId = ref(null);
    const editText = ref("");

    const notesCollection = collection(db, "notes");

    // Leer notas en tiempo real
    onSnapshot(notesCollection, (querySnapshot) => {
      notes.value = [];
      querySnapshot.forEach((doc) => {
        notes.value.push({ id: doc.id, ...doc.data() });
      });
    });

    // Agregar nota
    const addNote = async () => {
      if (newNote.value.trim() === "") return;
      await addDoc(notesCollection, { text: newNote.value });
      newNote.value = "";
    };

    // Eliminar nota
    const deleteNote = async (id) => {
      await deleteDoc(doc(db, "notes", id));
    };

    // Editar nota
    const startEdit = (note) => {
      editId.value = note.id;
      editText.value = note.text;
    };

    const cancelEdit = () => {
      editId.value = null;
      editText.value = "";
    };

    const updateNote = async (id) => {
      if (editText.value.trim() === "") return;
      const noteRef = doc(db, "notes", id);
      await updateDoc(noteRef, { text: editText.value });
      cancelEdit();
    };

    return {
      newNote,
      notes,
      addNote,
      deleteNote,
      editId,
      editText,
      startEdit,
      cancelEdit,
      updateNote,
    };
  },
};
</script>

<style scoped>
button {
  margin-left: 8px;
}
input {
  padding: 4px;
}
ul {
  list-style: none;
  padding: 0;
}
</style>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

<div>

<h2>Mis Notas</h2>

<button type="submit">Agregar</button>

</form>

<ul>

<button @click="startEdit(note)">Editar</button>

<button @click="deleteNote(note.id)">Eliminar</button>

</div>

<button @click="updateNote(note.id)">Guardar</button>

<button @click="cancelEdit">Cancelar</button>

</div>

</li>

</ul>

</div>

</template>

import { ref, onMounted } from "vue";

import {

collection,

addDoc,

getDocs,

updateDoc,

doc,

deleteDoc,

onSnapshot

} from "firebase/firestore";

import { db } from "../firebase";

export default {

name: "Notes",

setup() {

const newNote = ref("");

const notes = ref([]);

const editId = ref(null);

const editText = ref("");

const notesCollection = collection(db, "notes");

// Leer notas en tiempo real

onSnapshot(notesCollection, (querySnapshot) => {

notes.value = [];

querySnapshot.forEach((doc) => {

notes.value.push({ id: doc.id, ...doc.data() });

});

// Agregar nota

const addNote = async () => {

if (newNote.value.trim() === "") return;

await addDoc(notesCollection, { text: newNote.value });

newNote.value = "";

};

// Eliminar nota

const deleteNote = async (id) => {

await deleteDoc(doc(db, "notes", id));

};

// Editar nota

const startEdit = (note) => {

editId.value = note.id;

editText.value = note.text;

};

const cancelEdit = () => {

editId.value = null;

editText.value = "";

};

const updateNote = async (id) => {

if (editText.value.trim() === "") return;

const noteRef = doc(db, "notes", id);

await updateDoc(noteRef, { text: editText.value });

cancelEdit();

};

return {

newNote,

notes,

addNote,

deleteNote,

editId,

editText,

startEdit,

cancelEdit,

updateNote,

};

</script>

button {

margin-left: 8px;

}

input {

padding: 4px;

}

ul {

list-style: none;

padding: 0;

}

</style>

Explicación paso a paso:

Usamos Firestore para almacenar notas en la colección notes.
onSnapshot escucha en tiempo real los cambios para actualizar la lista.
addNote crea una nota nueva con el texto introducido.
deleteNote elimina la nota seleccionada.
Editamos texto en línea, guardando con updateNote.

2. Usar el componente en App.vue

Modifica src/App.vue para mostrar nuestro componente:

<template>
  <div id="app">
    <h1>Aplicación CRUD Vue.js con Firebase</h1>
    <Notes />
  </div>
</template>

<script>
import Notes from "./components/Notes.vue";

export default {
  components: {
    Notes,
  },
};
</script>

<h1>Aplicación CRUD Vue.js con Firebase</h1>

</div>

</template>

import Notes from "./components/Notes.vue";

export default {

components: {

Notes,

};

</script>

Implementación de autenticación básica

Agreguemos funcionalidad para que solo usuarios autenticados puedan acceder.

1. Crear componente `Auth.vue`

Crea en src/components/Auth.vue:

<template>
  <div>
    <h2>Autenticación</h2>

    <div v-if="!user">
      <form @submit.prevent="login">
        <input type="email" v-model="email" placeholder="Correo electrónico" required />
        <input type="password" v-model="password" placeholder="Contraseña" required />
        <button type="submit">Entrar</button>
      </form>
      <button @click="register">Registrarse</button>
    </div>

    <div v-else>
      <p>Bienvenido, {{ user.email }}</p>
      <button @click="logout">Cerrar sesión</button>
    </div>
  </div>
</template>

<script>
import { ref } from "vue";
import {
  createUserWithEmailAndPassword,
  signInWithEmailAndPassword,
  signOut,
  onAuthStateChanged
} from "firebase/auth";
import { auth } from "../firebase";

export default {
  name: "Auth",
  setup() {
    const email = ref("");
    const password = ref("");
    const user = ref(null);

    // Detectar cambios en la autenticación
    onAuthStateChanged(auth, (currentUser) => {
      user.value = currentUser;
    });

    // Registrar usuario
    const register = async () => {
      try {
        await createUserWithEmailAndPassword(auth, email.value, password.value);
        email.value = "";
        password.value = "";
      } catch (error) {
        alert(error.message);
      }
    };

    // Login
    const login = async () => {
      try {
        await signInWithEmailAndPassword(auth, email.value, password.value);
        email.value = "";
        password.value = "";
      } catch (error) {
        alert(error.message);
      }
    };

    // Logout
    const logout = async () => {
      await signOut(auth);
    };

    return {
      email,
      password,
      user,
      register,
      login,
      logout,
    };
  },
};
</script>

<style scoped>
input {
  display: block;
  margin-bottom: 8px;
  padding: 6px;
}
button {
  margin-right: 8px;
}
</style>

<div>

<h2>Autenticación</h2>

<button type="submit">Entrar</button>

</form>

<button @click="register">Registrarse</button>

</div>

<p>Bienvenido, {{ user.email }}</p>

<button @click="logout">Cerrar sesión</button>

</div>

</template>

import { ref } from "vue";

import {

createUserWithEmailAndPassword,

signInWithEmailAndPassword,

signOut,

onAuthStateChanged

} from "firebase/auth";

import { auth } from "../firebase";

export default {

name: "Auth",

setup() {

const email = ref("");

const password = ref("");

const user = ref(null);

// Detectar cambios en la autenticación

onAuthStateChanged(auth, (currentUser) => {

user.value = currentUser;

});

// Registrar usuario

const register = async () => {

try {

await createUserWithEmailAndPassword(auth, email.value, password.value);

email.value = "";

password.value = "";

} catch (error) {

alert(error.message);

}

};

// Login

const login = async () => {

try {

await signInWithEmailAndPassword(auth, email.value, password.value);

email.value = "";

password.value = "";

} catch (error) {

alert(error.message);

}

};

// Logout

const logout = async () => {

await signOut(auth);

};

return {

email,

password,

user,

logout,

};

</script>

input {

display: block;

margin-bottom: 8px;

padding: 6px;

}

button {

margin-right: 8px;

}

</style>

2. Controlar acceso a notas

Modifica src/App.vue para mostrar componente Auth y condicionar el acceso a Notes según usuario autenticado:

<template>
  <div id="app">
    <h1>Aplicación CRUD Vue.js con Firebase</h1>
    <Auth />
    <Notes v-if="user" />
  </div>
</template>

<script>
import { ref, onMounted } from "vue";
import Auth from "./components/Auth.vue";
import Notes from "./components/Notes.vue";
import { auth } from "./firebase";
import { onAuthStateChanged } from "firebase/auth";

export default {
  components: {
    Auth,
    Notes,
  },
  setup() {
    const user = ref(null);

    onAuthStateChanged(auth, (currentUser) => {
      user.value = currentUser;
    });

    return { user };
  },
};
</script>

<style>
#app {
  max-width: 600px;
  margin: 40px auto;
  font-family: Arial, sans-serif;
}
</style>

<h1>Aplicación CRUD Vue.js con Firebase</h1>

</div>

</template>

import { ref, onMounted } from "vue";

import Auth from "./components/Auth.vue";

import Notes from "./components/Notes.vue";

import { auth } from "./firebase";

import { onAuthStateChanged } from "firebase/auth";

export default {

components: {

Auth,

Notes,

setup() {

const user = ref(null);

onAuthStateChanged(auth, (currentUser) => {

user.value = currentUser;

});

return { user };

};

</script>

<style>

#app {

max-width: 600px;

margin: 40px auto;

font-family: Arial, sans-serif;

}

</style>

Despliegue de la aplicación

Una vez terminada y probada, vamos a desplegar la app para que esté accesible en internet.

Usando Firebase Hosting

Firebase tiene hosting estático muy fácil de usar.

Instala Firebase CLI globalmente:

npm install -g firebase-tools

1 2	npm install -g firebase-tools

Inicia sesión:

firebase login

1 2	firebase login

Inicializa el proyecto en la raíz de tu aplicación:

firebase init

1 2	firebase init

Selecciona Hosting
Selecciona el proyecto Firebase que creaste antes
Configura la carpeta pública como dist (directorio de build de Vue)
Configura como SPA respondiendo Sí a la opción

Construye tu aplicación Vue para producción:

npm run build

1 2	npm run build

Despliega:

firebase deploy

1 2	firebase deploy

Firebase CLI te dará la URL pública donde está tu app.

Conclusión y buenas prácticas

¡Felicidades! Has creado una aplicación CRUD Vue.js con Firebase Firestore y autenticación básica. Este tutorial Vue.js Firebase cubre los fundamentos de desarrollo frontend Vue.js e integración con Firebase para backend, almacenamiento y autenticación.

Buenas prácticas a seguir:

Seguridad: Cambia las reglas de Firestore para que solo usuarios autenticados puedan acceder y modificar sus datos.
Validación: Implementa validaciones más robustas en formularios.
Manejo de errores: Mejora el manejo de errores y feedback para el usuario.
Optimización: Usa Vuex o Pinia para manejo de estado en proyectos más grandes.

¿Qué sigue?

Explora la documentación oficial de Vue.js
Aprende sobre reglas de seguridad de Firestore
Añade funcionalidades como perfiles de usuario, subida de archivos y notificaciones.

Si te gustó este tutorial, ¡comparte y comienza tu camino en el desarrollo frontend Vue.js con Firebase!

Tutorial Vue.js Firebase: Cómo construir una aplicación CRUD paso a paso

Índice

¿Qué vamos a construir?

Configuración del entorno

Instalación de Vue CLI

Creación del proyecto Vue.js

Configuración de Firebase y Firestore

Crear un proyecto en Firebase Console

Agregar Firestore

Configurar Authentication

Obtener configuración para Web

Integración de Firebase en Vue.js

Instalar Firebase SDK

Crear archivo de configuración

Creación de componentes Vue para CRUD

1. Crear un componente Notes.vue

Explicación paso a paso:

2. Usar el componente en App.vue

Implementación de autenticación básica

1. Crear componente Auth.vue

2. Controlar acceso a notas

Despliegue de la aplicación

Usando Firebase Hosting

Conclusión y buenas prácticas

Buenas prácticas a seguir:

¿Qué sigue?

1. Crear un componente `Notes.vue`

1. Crear componente `Auth.vue`