Tutorial detallado para crear una aplicación web de gestión de tareas con Vue.js y Firebase

¿Quieres aprender a desarrollar una aplicación web para gestionar tareas utilizando tecnologías modernas y potentes? En este tutorial paso a paso, te guiaré desde la configuración inicial hasta el despliegue, utilizando Vue.js para el frontend y Firebase como backend. Este es un tutorial ideal para desarrolladores principiantes e intermedios que desean dominar el desarrollo frontend Vue junto con funciones de backend sin servidor.

Índice

Introducción
Paso 1: Configuración del proyecto Vue.js
Paso 2: Instalación e integración de Firebase
Paso 3: Configuración de Firebase Authentication
Paso 4: Creación de la base de datos Firestore
Paso 5: Estructura de componentes en Vue.js
Paso 6: Uso de Vue Composition API para manejo del estado
Paso 7: Funcionalidades de la app de tareas
Paso 8: Despliegue de la aplicación
Conclusión y buenas prácticas

Introducción

Combinar Vue.js con Firebase es una excelente forma de aprender desarrollo moderno frontend con funcionalidades backend sin servidor, como autenticación y almacenamiento en tiempo real. Firebase te libera de administrar servidores y te permite crear apps escalables rápido.

Paso 1: Configuración del proyecto Vue.js

Para comenzar, necesitarás tener Node.js y npm instalados en tu equipo.

Crea un nuevo proyecto Vue 3 usando Vite, que es rápido y ligero:

npm create vite@latest vue-firebase-tasks -- --template vue
cd vue-firebase-tasks
npm install
npm run dev

npm create vite@latest vue-firebase-tasks -- --template vue

cd vue-firebase-tasks

npm install

npm run dev

Este comando crea un proyecto base con Vue 3 y levanta un servidor de desarrollo.

Paso 2: Instalación e integración de Firebase

Vamos a instalar Firebase SDK para poder conectar la app con los servicios de Firebase.

Ejecuta:

npm install firebase

1 2	npm install firebase

Luego crea un archivo src/firebase.js para configurar Firebase:

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

// Configuración de tu proyecto Firebase (reemplaza con tus datos)
const firebaseConfig = {
  apiKey: "TU_API_KEY",
  authDomain: "TU_AUTH_DOMAIN",
  projectId: "TU_PROJECT_ID",
  storageBucket: "TU_STORAGE_BUCKET",
  messagingSenderId: "TU_MESSAGING_SENDER_ID",
  appId: "TU_APP_ID"
};

// Inicializa Firebase
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);

export { auth, db };

// src/firebase.js

import { initializeApp } from 'firebase/app';

import { getAuth } from 'firebase/auth';

import { getFirestore } from 'firebase/firestore';

// Configuración de tu proyecto Firebase (reemplaza con tus datos)

const firebaseConfig = {

apiKey: "TU_API_KEY",

authDomain: "TU_AUTH_DOMAIN",

projectId: "TU_PROJECT_ID",

storageBucket: "TU_STORAGE_BUCKET",

messagingSenderId: "TU_MESSAGING_SENDER_ID",

appId: "TU_APP_ID"

};

// Inicializa Firebase

const app = initializeApp(firebaseConfig);

const auth = getAuth(app);

const db = getFirestore(app);

export { auth, db };

Ve a Firebase Console, crea un proyecto nuevo y copia la configuración para reemplazar en el código.

Paso 3: Configuración de Firebase Authentication

En el panel de Firebase:

Activa el método de autenticación Email/Password en Authentication > Sign-in method.

Ahora crearemos un simple sistema para usuarios se puedan registrar y loguear.

Ejemplo de registro y login – fragmento:

<!-- src/components/Auth.vue -->
<template>
  <div>
    <h2>Registro / Login</h2>
    <input v-model="email" placeholder="Correo electrónico" />
    <input v-model="password" type="password" placeholder="Contraseña" />

    <button @click="register">Registrar</button>
    <button @click="login">Iniciar sesión</button>

    <p v-if="errorMessage" style="color:red">{{ errorMessage }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { auth } from '../firebase';
import { createUserWithEmailAndPassword, signInWithEmailAndPassword } from 'firebase/auth';

const email = ref('');
const password = ref('');
const errorMessage = ref('');

async function register() {
  errorMessage.value = '';
  try {
    await createUserWithEmailAndPassword(auth, email.value, password.value);
    alert('Usuario registrado con éxito.');
  } catch (error) {
    errorMessage.value = error.message;
  }
}

async function login() {
  errorMessage.value = '';
  try {
    await signInWithEmailAndPassword(auth, email.value, password.value);
    alert('Sesión iniciada.');
  } catch (error) {
    errorMessage.value = error.message;
  }
}
</script>

<div>

<h2>Registro / Login</h2>

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

<button @click="login">Iniciar sesión</button>

<p v-if="errorMessage" style="color:red">{{ errorMessage }}</p>

</div>

</template>

import { ref } from 'vue';

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

import { createUserWithEmailAndPassword, signInWithEmailAndPassword } from 'firebase/auth';

const email = ref('');

const password = ref('');

const errorMessage = ref('');

async function register() {

errorMessage.value = '';

try {

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

alert('Usuario registrado con éxito.');

} catch (error) {

errorMessage.value = error.message;

}

async function login() {

errorMessage.value = '';

try {

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

alert('Sesión iniciada.');

} catch (error) {

errorMessage.value = error.message;

}

</script>

Paso 4: Creación de la base de datos Firestore

En Firebase Console, activa Firestore Database en modo producción o modo prueba mientras desarrollas.

Aquí almacenaremos las tareas de cada usuario.

Paso 5: Estructura de componentes en Vue.js

Para la gestión de tareas, crea los siguientes componentes:

Auth.vue para login/registro
TaskList.vue para mostrar las tareas
AddTask.vue para agregar nuevas tareas

Implementaremos un control básico para mostrar el área de tareas solo si el usuario está autenticado.

Ejemplo en App.vue:

<template>
  <div>
    <Auth v-if="!user" />
    <div v-else>
      <h1>Mis Tareas</h1>
      <button @click="logout">Cerrar sesión</button>
      <AddTask />
      <TaskList />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { auth } from './firebase';
import { onAuthStateChanged, signOut } from 'firebase/auth';
import Auth from './components/Auth.vue';
import AddTask from './components/AddTask.vue';
import TaskList from './components/TaskList.vue';

const user = ref(null);

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

function logout() {
  signOut(auth);
}
</script>

<div>

<h1>Mis Tareas</h1>

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

</div>

</template>

import { ref, onMounted } from 'vue';

import { auth } from './firebase';

import { onAuthStateChanged, signOut } from 'firebase/auth';

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

import AddTask from './components/AddTask.vue';

import TaskList from './components/TaskList.vue';

const user = ref(null);

onMounted(() => {

onAuthStateChanged(auth, (currentUser) => {

user.value = currentUser;

});

function logout() {

signOut(auth);

}

</script>

Paso 6: Uso de Vue Composition API para manejo del estado

Usaremos el Composition API para manejar el estado interno y comunicación entre componentes. Por ejemplo, para agregar una tarea:

<!-- src/components/AddTask.vue -->
<template>
  <div>
    <input v-model="taskText" placeholder="Nueva tarea" />
    <button @click="addTask">Agregar</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { db, auth } from '../firebase';
import { collection, addDoc, serverTimestamp } from 'firebase/firestore';

const taskText = ref('');

async function addTask() {
  if (taskText.value.trim() === '') return;

  try {
    const user = auth.currentUser;
    if (!user) throw new Error('No autenticado');

    await addDoc(collection(db, 'users', user.uid, 'tasks'), {
      text: taskText.value,
      completed: false,
      createdAt: serverTimestamp()
    });

    taskText.value = '';
  } catch (err) {
    alert('Error agregando tarea: ' + err.message);
  }
}
</script>

<div>

<button @click="addTask">Agregar</button>

</div>

</template>

import { ref } from 'vue';

import { db, auth } from '../firebase';

import { collection, addDoc, serverTimestamp } from 'firebase/firestore';

const taskText = ref('');

async function addTask() {

if (taskText.value.trim() === '') return;

try {

const user = auth.currentUser;

if (!user) throw new Error('No autenticado');

await addDoc(collection(db, 'users', user.uid, 'tasks'), {

text: taskText.value,

completed: false,

createdAt: serverTimestamp()

});

taskText.value = '';

} catch (err) {

alert('Error agregando tarea: ' + err.message);

}

</script>

Paso 7: Funcionalidades de la app de tareas

Mostrar tareas en tiempo real

<!-- src/components/TaskList.vue -->
<template>
  <div v-if="tasks.length">
    <ul>
      <li v-for="task in tasks" :key="task.id">
        <input type="checkbox" v-model="task.completed" @change="toggleComplete(task)" />
        <span :style="{ textDecoration: task.completed ? 'line-through' : 'none' }">{{ task.text }}</span>
        <button @click="deleteTask(task.id)">Eliminar</button>
      </li>
    </ul>
  </div>
  <p v-else>No tienes tareas.</p>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { db, auth } from '../firebase';
import { collection, query, orderBy, onSnapshot, doc, updateDoc, deleteDoc } from 'firebase/firestore';

const tasks = ref([]);
let unsubscribe;

onMounted(() => {
  const user = auth.currentUser;
  if (!user) return;

  const tasksCollection = collection(db, 'users', user.uid, 'tasks');
  const q = query(tasksCollection, orderBy('createdAt', 'desc'));
  unsubscribe = onSnapshot(q, (querySnapshot) => {
    tasks.value = querySnapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
  });
});

onUnmounted(() => {
  if (unsubscribe) unsubscribe();
});

async function toggleComplete(task) {
  const user = auth.currentUser;
  if (!user) return;

  const taskRef = doc(db, 'users', user.uid, 'tasks', task.id);
  await updateDoc(taskRef, { completed: task.completed });
}

async function deleteTask(id) {
  const user = auth.currentUser;
  if (!user) return;

  await deleteDoc(doc(db, 'users', user.uid, 'tasks', id));
}
</script>

<ul>

<button @click="deleteTask(task.id)">Eliminar</button>

</li>

</ul>

</div>

<p v-else>No tienes tareas.</p>

</template>

import { ref, onMounted, onUnmounted } from 'vue';

import { db, auth } from '../firebase';

import { collection, query, orderBy, onSnapshot, doc, updateDoc, deleteDoc } from 'firebase/firestore';

const tasks = ref([]);

let unsubscribe;

onMounted(() => {

const user = auth.currentUser;

if (!user) return;

const tasksCollection = collection(db, 'users', user.uid, 'tasks');

const q = query(tasksCollection, orderBy('createdAt', 'desc'));

unsubscribe = onSnapshot(q, (querySnapshot) => {

tasks.value = querySnapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));

});

onUnmounted(() => {

if (unsubscribe) unsubscribe();

});

async function toggleComplete(task) {

const user = auth.currentUser;

if (!user) return;

const taskRef = doc(db, 'users', user.uid, 'tasks', task.id);

await updateDoc(taskRef, { completed: task.completed });

}

async function deleteTask(id) {

const user = auth.currentUser;

if (!user) return;

await deleteDoc(doc(db, 'users', user.uid, 'tasks', id));

}

</script>

Esta configuración permite que tu app muestre tareas en tiempo real y responda a cambios instantáneamente.

Paso 8: Despliegue de la aplicación

Para desplegar tu app puedes usar servicios como Vercel o Firebase Hosting.

Despliegue con Firebase Hosting

Instala Firebase CLI:

npm install -g firebase-tools

1 2	npm install -g firebase-tools

Inicializa Firebase hosting en tu proyecto:

firebase login
firebase init hosting

firebase login

firebase init hosting

Selecciona el proyecto
Define dist como carpeta pública (Vite genera build ahí)
Configura como SPA

Crea el build del proyecto:

npm run build

1 2	npm run build

Despliega:

firebase deploy --only hosting

1 2	firebase deploy --only hosting

Tu aplicación estará disponible en la URL proporcionada.

Conclusión y buenas prácticas

Has aprendido a crear una aplicación tareas Firebase con un desarrollo frontend Vue moderno y funcional. Esta app integra:

Autenticación segura con Firebase Authentication
Almacenamiento en la nube escalable con Firestore
Manejo eficiente del estado usando Vue Composition API
Despliegue sencillo con Firebase Hosting

Buenas prácticas para futuros proyectos:

Mantén tus claves Firebase protegidas y no las subas a repositorios públicos.
Estructura bien los componentes para mantener el código limpio y reutilizable.
Usa reglas de seguridad en Firestore para proteger los datos.
Considera usar Vue Router para navegar entre vistas en apps más complejas.
Añade validaciones en formularios y manejo de errores para mejorar UX.

Si te gustó este tutorial Vue.js y quieres seguir mejorando tus habilidades para crear app con Firebase, suscríbete a blogs, canales y practica con proyectos reales.

¡Feliz desarrollo!

Palabras clave: tutorial Vue.js, aplicación tareas Firebase, desarrollo frontend Vue, crear app con Firebase