Tutorial Vue.js: Cómo crear una lista de tareas con almacenamiento en LocalStorage
¡Bienvenido a este tutorial paso a paso donde aprenderás a construir una sencilla pero funcional lista de tareas (To-Do List) utilizando Vue.js y LocalStorage! Este tutorial está pensado especialmente para desarrolladores principiantes que desean adentrarse en el desarrollo frontend y comprender conceptos importantes como gestión del estado local, creación de componentes y almacenamiento persistente en el navegador.
Índice
- ¿Qué es Vue.js y LocalStorage?
- Configuración inicial del proyecto Vue.js
- Estructura de la aplicación y creación de componentes
- Gestión del estado local y vinculación con LocalStorage
- Diseño básico con CSS para una interfaz amigable
- Conclusión y buenas prácticas
¿Qué es Vue.js y LocalStorage?
Vue.js
Vue.js es un framework progresivo para construir interfaces de usuario. Se destaca por su sencillez, flexibilidad y una curva de aprendizaje amigable, ideal para principiantes en desarrollo frontend.
LocalStorage
LocalStorage es una API del navegador que permite almacenar datos en el cliente de forma persistente, incluso al cerrar la pestaña o el navegador. Es perfecta para guardar información como listas de tareas sin necesidad de un backend.
Configuración inicial del proyecto Vue.js
Para comenzar, utilizaremos la herramienta oficial Vue CLI para crear un proyecto simplificado. Sigue estos pasos:
Paso 1: Instalar Vue CLI
Abre tu terminal y ejecuta:
|
1 2 |
npm install -g @vue/cli |
Esto instala la interfaz de línea de comandos de Vue para crear proyectos.
Paso 2: Crear el proyecto
Ejecuta:
|
1 2 |
vue create todo-list |
Selecciona la configuración predeterminada (Default Vue 3 preset). Esto instalará Vue 3 con las opciones básicas.
Paso 3: Ejecutar la aplicación base
Entra en el directorio y ejecuta el servidor de desarrollo:
|
1 2 3 |
cd todo-list npm run serve |
Ahora en el navegador abre http://localhost:5173 o la dirección que te indique el terminal para ver la app inicial de Vue.
Estructura de la aplicación y creación de componentes
Vamos a crear una aplicación simple que muestre una lista, permita agregar y eliminar tareas.
Paso 1: Limpieza del proyecto
Abre el archivo src/App.vue y reemplaza su contenido con esta estructura básica:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
<template> <div id="app"> <h1>Mi Lista de Tareas</h1> <TaskInput @add-task="addTask" /> <TaskList :tasks="tasks" @remove-task="removeTask" /> </div> </template> <script> import TaskInput from './components/TaskInput.vue' import TaskList from './components/TaskList.vue' export default { name: 'App', components: { TaskInput, TaskList }, data() { return { tasks: [] } }, methods: { addTask(taskText) { if(taskText.trim() === '') return this.tasks.push({ id: Date.now(), text: taskText }) this.saveTasks() }, removeTask(taskId) { this.tasks = this.tasks.filter(task => task.id !== taskId) this.saveTasks() }, saveTasks() { localStorage.setItem('tasks', JSON.stringify(this.tasks)) }, loadTasks() { const savedTasks = localStorage.getItem('tasks') if(savedTasks) { this.tasks = JSON.parse(savedTasks) } } }, mounted() { this.loadTasks() } } </script> <style> #app { max-width: 600px; margin: 50px auto; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } h1 { text-align: center; color: #333; } </style> |
Paso 2: Crear el componente TaskInput
Crea un archivo src/components/TaskInput.vue con el siguiente código:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
<template> <div class="task-input"> <input type="text" v-model="taskText" placeholder="Escribe una tarea..." @keyup.enter="submitTask" /> <button @click="submitTask">Agregar</button> </div> </template> <script> export default { name: 'TaskInput', data() { return { taskText: '' } }, methods: { submitTask() { if(this.taskText.trim() === '') return this.$emit('add-task', this.taskText) this.taskText = '' } } } </script> <style scoped> .task-input { display: flex; margin-bottom: 20px; } .task-input input { flex: 1; padding: 10px; border: 1px solid #ccc; border-radius: 4px 0 0 4px; font-size: 1rem; } .task-input button { padding: 10px 20px; background-color: #42b983; border: none; color: white; font-weight: bold; cursor: pointer; border-radius: 0 4px 4px 0; transition: background-color 0.3s ease; } .task-input button:hover { background-color: #369870; } </style> |
Este componente contiene un campo de texto y un botón para agregar tareas. El input se enlaza con v-model para la captura, y la emisión del evento add-task pasa el texto hacia el componente padre.
Paso 3: Crear el componente TaskList
Crea el archivo src/components/TaskList.vue con este contenido:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
<template> <ul class="task-list"> <li v-for="task in tasks" :key="task.id" class="task-item"> <span>{{ task.text }}</span> <button @click="$emit('remove-task', task.id)">Eliminar</button> </li> </ul> </template> <script> export default { name: 'TaskList', props: { tasks: { type: Array, required: true } } } </script> <style scoped> .task-list { list-style: none; padding: 0; } .task-item { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #eee; padding: 10px 0; } .task-item span { word-break: break-word; } .task-item button { background-color: #ff4d4d; border: none; color: white; padding: 5px 10px; font-weight: bold; border-radius: 4px; cursor: pointer; transition: background-color 0.3s ease; } .task-item button:hover { background-color: #cc0000; } </style> |
Este componente recibe la lista de tareas como propiedad y muestra cada tarea con un botón para eliminar.
Gestión del estado local y vinculación con LocalStorage
En el código de App.vue ya implementamos algunas funciones clave:
-
Estado reactivo
tasks: Mantiene la lista actual de tareas. -
Métodos
addTaskyremoveTask: Actualizan la lista local y llaman asaveTasks. -
Función
saveTasks: Convierte la lista en JSON y la almacena en LocalStorage. -
Función
loadTasks: Al montar el componente, recupera las tareas del almacenamiento local para cargar el estado inicial.
Esto permite que tus tareas se conserven aunque el usuario cierre o recargue la página, un aspecto fundamental en desarrollo frontend para mejorar la experiencia de usuario.
Diseño básico con CSS para una interfaz amigable
Ya incluimos estilos sencillos, modernos y responsivos que hacen la interfaz fácil de usar:
- Centrado de la aplicación en la pantalla.
- Tipografía limpia y legible.
- Botones con colores contrastantes y efectos hover.
- Inputs adaptables al tamaño disponible.
Puedes ampliar el diseño usando frameworks como Tailwind CSS o Bootstrap si deseas algo más avanzado, pero para este tutorial mantenemos lo simple para que sea didáctico y claro.
Código final resumido
src/App.vue
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
<template> <div id="app"> <h1>Mi Lista de Tareas</h1> <TaskInput @add-task="addTask" /> <TaskList :tasks="tasks" @remove-task="removeTask" /> </div> </template> <script> import TaskInput from './components/TaskInput.vue' import TaskList from './components/TaskList.vue' export default { name: 'App', components: { TaskInput, TaskList }, data() { return { tasks: [] } }, methods: { addTask(taskText) { if(taskText.trim() === '') return this.tasks.push({ id: Date.now(), text: taskText }) this.saveTasks() }, removeTask(taskId) { this.tasks = this.tasks.filter(t => t.id !== taskId) this.saveTasks() }, saveTasks() { localStorage.setItem('tasks', JSON.stringify(this.tasks)) }, loadTasks() { const saved = localStorage.getItem('tasks') if(saved) this.tasks = JSON.parse(saved) } }, mounted() { this.loadTasks() } } </script> <style> #app { max-width: 600px; margin: 50px auto; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } h1 { text-align: center; color: #333; } </style> |
(Recuerda crear los componentes TaskInput.vue y TaskList.vue tal como vimos anteriormente.)
Conclusión y buenas prácticas
¡Felicidades! Ahora tienes una aplicación funcional de lista de tareas creada con Vue.js y almacenamiento persistente usando LocalStorage. Con este tutorial aprendiste:
- Configurar un proyecto Vue.js desde cero.
- Crear componentes reutilizables y modularizar la app.
- Gestionar el estado local reactivo y comunicarse entre componentes con eventos.
- Usar LocalStorage para conservar datos entre sesiones.
- Aplicar estilos CSS simples para mejorar la experiencia de usuario.
Buenas prácticas recomendadas
- Valida siempre la entrada de usuario antes de procesarla.
- Mantén los componentes enfocados en una sola responsabilidad.
- Maneja errores al trabajar con datos externos o almacenamiento.
- Documenta tu código con comentarios claros.
- Usa nombres descriptivos para variables y componentes.
¿Qué puedes hacer ahora?
- Añadir funcionalidad para marcar tareas como completadas.
- Implementar filtrado por estado (todas, completas, pendientes).
- Explorar Vuex para gestión de estado más compleja.
- Integrar APIs externas o bases de datos para almacenamiento remoto.
¡Empieza a practicar y desarrolla tus propias aplicaciones! Si te gustó este tutorial Vue.js, no olvides compartirlo con otros desarrolladores principiantes.
Recursos útiles
¡Gracias por leer! Si tienes dudas o deseas que te guiemos en otro proyecto, déjanos un comentario.
