Tutorial Vue.js y Firebase: Crear una App de Lista de Compras paso a paso

¡Bienvenido a este tutorial detallado para desarrolladores principiantes e intermedios! Aquí aprenderás a crear una aplicación web para gestionar listas de compras utilizando Vue.js y Firebase, cubriendo desde la configuración inicial hasta el despliegue final.

Este proyecto combina lo mejor del desarrollo frontend moderno con Vue y un backend serverless gracias a Firebase, integrando autenticación y base de datos en tiempo real. Al final, tendrás una app funcional donde tus usuarios podrán agregar, editar, eliminar y marcar productos como comprados.

Índice

1. Configuración del Proyecto Vue.js
2. Integración con Firebase
2.1 Creación del proyecto en Firebase
2.2 Instalación y configuración del SDK de Firebase
3. Autenticación de Usuarios con Firebase Authentication
4. Gestión de la Base de Datos en Tiempo Real
5. Implementación de Funcionalidades (CRUD) para la Lista
6. Manejo del Estado con Vue Composition API
7. Despliegue de la Aplicación
Conclusión y Buenas Prácticas

1. Configuración del Proyecto Vue.js

Vamos a comenzar creando un nuevo proyecto Vue.js utilizando Vue CLI, que nos facilita crear un entorno profesional rápidamente.

Paso 1: Instalar Vue CLI (si no lo tienes)

npm install -g @vue/cli

1 2	npm install -g @vue/cli

Paso 2: Crear el proyecto

vue create lista-compras-firebase

1 2	vue create lista-compras-firebase

Selecciona las opciones para Vue 3, Babel, Router y Vuex si deseas (en nuestro caso usaremos Composition API, Vuex es opcional).

Paso 3: Navegar al directorio y probar

cd lista-compras-firebase
npm run serve

cd lista-compras-firebase

npm run serve

Abre http://localhost:8080 para verificar que la app básica de Vue está funcionando.

2. Integración con Firebase

2.1 Creación del proyecto en Firebase

Ve a https://console.firebase.google.com/
Crea un nuevo proyecto, por ejemplo: ListaComprasApp.
En el dashboard, agrega una nueva app web y copia la configuración (apiKey, authDomain, etc.).

2.2 Instalación y configuración del SDK de Firebase

Vamos a instalar Firebase en nuestro proyecto Vue:

npm install firebase

1 2	npm install firebase

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

// src/firebase.js
import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';
import { getDatabase } from 'firebase/database';

const firebaseConfig = {
  apiKey: 'TU_API_KEY',
  authDomain: 'TU_AUTH_DOMAIN',
  databaseURL: 'TU_DATABASE_URL',
  projectId: 'TU_PROJECT_ID',
  storageBucket: 'TU_STORAGE_BUCKET',
  messagingSenderId: 'TU_MESSAGING_SENDER_ID',
  appId: 'TU_APP_ID',
};

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

// Exporta servicios
export const auth = getAuth(app);
export const database = getDatabase(app);

// src/firebase.js

import { initializeApp } from 'firebase/app';

import { getAuth } from 'firebase/auth';

import { getDatabase } from 'firebase/database';

const firebaseConfig = {

apiKey: 'TU_API_KEY',

authDomain: 'TU_AUTH_DOMAIN',

databaseURL: 'TU_DATABASE_URL',

projectId: 'TU_PROJECT_ID',

storageBucket: 'TU_STORAGE_BUCKET',

messagingSenderId: 'TU_MESSAGING_SENDER_ID',

appId: 'TU_APP_ID',

};

// Inicializa Firebase

const app = initializeApp(firebaseConfig);

// Exporta servicios

export const auth = getAuth(app);

export const database = getDatabase(app);

Reemplaza los valores en firebaseConfig por los obtenidos en la consola Firebase.

3. Autenticación de Usuarios con Firebase Authentication

Para gestionar el acceso de usuarios, implementaremos la autenticación con correo y contraseña.

Paso 1: Habilitar el método en Firebase

Desde la consola Firebase > Authentication > Método de inicio de sesión > Habilitar correo y contraseña.

Paso 2: Crear componentes básicos de login y registro

En src/components, crea Login.vue y Register.vue.

Ejemplo de `Register.vue`:

<template>
  <div>
    <h2>Registro</h2>
    <form @submit.prevent="register">
      <input v-model="email" type="email" placeholder="Email" required />
      <input v-model="password" type="password" placeholder="Contraseña" required />
      <button type="submit">Registrar</button>
    </form>
    <p v-if="error">{{ error }}</p>
  </div>
</template>

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

export default {
  setup() {
    const email = ref('');
    const password = ref('');
    const error = ref(null);

    const register = async () => {
      error.value = null;
      try {
        await createUserWithEmailAndPassword(auth, email.value, password.value);
        alert('Usuario registrado exitosamente');
      } catch (e) {
        error.value = e.message;
      }
    };

    return { email, password, error, register };
  },
};
</script>

<div>

<h2>Registro</h2>

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

</form>

<p v-if="error">{{ error }}</p>

</div>

</template>

import { ref } from 'vue';

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

import { createUserWithEmailAndPassword } from 'firebase/auth';

export default {

setup() {

const email = ref('');

const password = ref('');

const error = ref(null);

const register = async () => {

error.value = null;

try {

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

alert('Usuario registrado exitosamente');

} catch (e) {

error.value = e.message;

}

};

return { email, password, error, register };

};

</script>

Implementa un Login.vue de forma similar con signInWithEmailAndPassword.

Paso 3: Configurar rutas y protecciones

Usa Vue Router para navegación y protege las rutas que requieran usuario autenticado.

4. Gestión de la Base de Datos en Tiempo Real

Utilizaremos Firebase Realtime Database para sincronizar las listas de compras.

Paso 1: Crear estructura básica en Realtime Database

En la consola Firebase > Database > Realtime Database > Crear base de datos (modo de prueba para desarrollo).

Paso 2: Organización de datos

Una estructura recomendada:

/listas
  /{userId}
    /productos
      /{productoId}
        nombre: string
        comprado: boolean
        cantidad: number

/listas

/{userId}

/productos

/{productoId}

nombre: string

comprado: boolean

cantidad: number

Paso 3: Lectura y escritura de datos

En src/composables/useListaCompras.js implementaremos un hook para manejar esta lógica.

import { ref, onUnmounted } from 'vue';
import {
  getDatabase,
  ref as dbRef,
  onValue,
  push,
  set,
  update,
  remove
} from 'firebase/database';
import { auth } from '../firebase';

export function useListaCompras() {
  const productos = ref([]);
  const db = getDatabase();

  let userId = auth.currentUser ? auth.currentUser.uid : null;
  const listaRef = dbRef(db, `listas/${userId}/productos`);

  // Leer datos en tiempo real
  const unsubscribe = onValue(listaRef, (snapshot) => {
    const data = snapshot.val();
    productos.value = data ? Object.entries(data).map(([id, val]) => ({ id, ...val })) : [];
  });

  const agregarProducto = async (producto) => {
    const newProductoRef = push(listaRef);
    await set(newProductoRef, producto);
  };

  const actualizarProducto = async (id, updates) => {
    const productoRef = dbRef(db, `listas/${userId}/productos/${id}`);
    await update(productoRef, updates);
  };

  const eliminarProducto = async (id) => {
    const productoRef = dbRef(db, `listas/${userId}/productos/${id}`);
    await remove(productoRef);
  };

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

  return { productos, agregarProducto, actualizarProducto, eliminarProducto };
}

import { ref, onUnmounted } from 'vue';

import {

getDatabase,

ref as dbRef,

onValue,

push,

set,

update,

remove

} from 'firebase/database';

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

export function useListaCompras() {

const productos = ref([]);

const db = getDatabase();

let userId = auth.currentUser ? auth.currentUser.uid : null;

const listaRef = dbRef(db, `listas/${userId}/productos`);

// Leer datos en tiempo real

const unsubscribe = onValue(listaRef, (snapshot) => {

const data = snapshot.val();

productos.value = data ? Object.entries(data).map(([id, val]) => ({ id, ...val })) : [];

});

const agregarProducto = async (producto) => {

const newProductoRef = push(listaRef);

await set(newProductoRef, producto);

};

const actualizarProducto = async (id, updates) => {

const productoRef = dbRef(db, `listas/${userId}/productos/${id}`);

await update(productoRef, updates);

};

const eliminarProducto = async (id) => {

const productoRef = dbRef(db, `listas/${userId}/productos/${id}`);

await remove(productoRef);

};

onUnmounted(() => {

unsubscribe();

});

return { productos, agregarProducto, actualizarProducto, eliminarProducto };

}

Este hook podemos consumir en nuestros componentes para mostrar y manipular la lista.

5. Implementación de Funcionalidades (CRUD) para la Lista

Paso 1: Componente ListaCompras.vue

<template>
  <div>
    <h2>Lista de Compras</h2>
    <form @submit.prevent="agregar">
      <input v-model="nuevoProducto" placeholder="Nuevo producto" required />
      <input v-model.number="cantidad" type="number" min="1" placeholder="Cantidad" required />
      <button type="submit">Agregar</button>
    </form>
    <ul>
      <li v-for="producto in productos" :key="producto.id">
        <input type="checkbox" v-model="producto.comprado" @change="toggleComprado(producto)" />
        <span :style="{ textDecoration: producto.comprado ? 'line-through' : 'none' }">
          {{ producto.nombre }} ({{ producto.cantidad }})
        </span>
        <button @click="editar(producto)">Editar</button>
        <button @click="eliminar(producto.id)">Eliminar</button>
      </li>
    </ul>
    <!-- Modal o formulario para editar -->
    <div v-if="productoEditando">
      <h3>Editar Producto</h3>
      <input v-model="productoEditando.nombre" />
      <input v-model.number="productoEditando.cantidad" type="number" min="1" />
      <button @click="guardarEdicion">Guardar</button>
      <button @click="cancelarEdicion">Cancelar</button>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';
import { useListaCompras } from '../composables/useListaCompras';

export default {
  setup() {
    const nuevoProducto = ref('');
    const cantidad = ref(1);
    const productoEditando = ref(null);

    const { productos, agregarProducto, actualizarProducto, eliminarProducto } = useListaCompras();

    const agregar = () => {
      agregarProducto({
        nombre: nuevoProducto.value,
        cantidad: cantidad.value,
        comprado: false,
      });
      nuevoProducto.value = '';
      cantidad.value = 1;
    };

    const eliminar = (id) => {
      eliminarProducto(id);
    };

    const editar = (producto) => {
      productoEditando.value = { ...producto };
    };

    const guardarEdicion = () => {
      actualizarProducto(productoEditando.value.id, {
        nombre: productoEditando.value.nombre,
        cantidad: productoEditando.value.cantidad,
      });
      productoEditando.value = null;
    };

    const cancelarEdicion = () => {
      productoEditando.value = null;
    };

    const toggleComprado = (producto) => {
      actualizarProducto(producto.id, { comprado: producto.comprado });
    };

    return {
      nuevoProducto,
      cantidad,
      productos,
      agregar,
      eliminar,
      editar,
      productoEditando,
      guardarEdicion,
      cancelarEdicion,
      toggleComprado,
    };
  },
};
</script>

<div>

<h2>Lista de Compras</h2>

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

</form>

<ul>

{{ producto.nombre }} ({{ producto.cantidad }})

</span>

<button @click="editar(producto)">Editar</button>

<button @click="eliminar(producto.id)">Eliminar</button>

</li>

</ul>

<h3>Editar Producto</h3>

<button @click="guardarEdicion">Guardar</button>

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

</div>

</template>

import { ref } from 'vue';

import { useListaCompras } from '../composables/useListaCompras';

export default {

setup() {

const nuevoProducto = ref('');

const cantidad = ref(1);

const productoEditando = ref(null);

const { productos, agregarProducto, actualizarProducto, eliminarProducto } = useListaCompras();

const agregar = () => {

agregarProducto({

nombre: nuevoProducto.value,

cantidad: cantidad.value,

comprado: false,

});

nuevoProducto.value = '';

cantidad.value = 1;

};

const eliminar = (id) => {

eliminarProducto(id);

};

const editar = (producto) => {

productoEditando.value = { ...producto };

};

const guardarEdicion = () => {

actualizarProducto(productoEditando.value.id, {

nombre: productoEditando.value.nombre,

cantidad: productoEditando.value.cantidad,

});

productoEditando.value = null;

};

const cancelarEdicion = () => {

productoEditando.value = null;

};

const toggleComprado = (producto) => {

actualizarProducto(producto.id, { comprado: producto.comprado });

};

return {

nuevoProducto,

cantidad,

productos,

agregar,

eliminar,

editar,

productoEditando,

guardarEdicion,

cancelarEdicion,

toggleComprado,

};

</script>

¡Con esto tienes una lista que se sincroniza en tiempo real mediante Firebase Realtime Database!

6. Manejo del Estado con Vue Composition API

En este tutorial usamos Composition API para organizar la lógica de forma modular — el hook useListaCompras es un patrón recomendado para manejar estado y efectos secundarios.

Si prefieres usar Vuex, la lógica de Firebase puede integrarse en actions y mutations, pero Composition API aporta mayor simplicidad para proyectos pequeños y medianos.

7. Despliegue de la Aplicación

Una vez terminada, es momento de publicar la app para que sea accesible para tus usuarios.

Paso 1: Construir la app para producción

npm run build

1 2	npm run build

Esto crea una carpeta dist con los archivos listos.

Paso 2 (opcional): Despliegue con Firebase Hosting

Instala Firebase CLI:

npm install -g firebase-tools

1 2	npm install -g firebase-tools

Inicializa Firebase Hosting dentro del directorio del proyecto:

firebase login
firebase init hosting

firebase login

firebase init hosting

Selecciona la carpeta dist como public.

Despliega:

firebase deploy

1 2	firebase deploy

Tu app estará disponible en una URL proporcionada.

Conclusión y Buenas Prácticas

En este tutorial hemos cubierto un proyecto completo para crear una app lista de compras Vue con Firebase paso a paso, integrando autenticación, base de datos en tiempo real, y funcionalidades CRUD.

Recomendaciones para tu desarrollo:

Seguridad: Configura reglas en Firebase para proteger datos según usuario.
UX: Añade validaciones y mensajes para mejorar la experiencia.
Optimización: Considera usar Firestore si necesitas consultas avanzadas.
Estado: Modulariza la lógica para escalar la app eficazmente.

¡Te invitamos a profundizar y adaptar este proyecto según tus necesidades! Comparte tu experiencia y contribuye a la comunidad.

Con este tutorial Vue.js Firebase, tienes la base para desarrollar apps web modernas y serverless. ¡Manos a la obra!