Nuxt Trello Clon

Introdución

Trello es una herramienta para el trabajo en equipo. Una lista de tareas. Igual ya te es familiar. Usa el método Kaban.

Puedes añadir nuevas columnas, renombrarlas y añadir o eliminar nuevas tareas. Puedes arrastrar y soltar para ordenar las columnas y también puedes ordenar las tareas o cambiarlas de columna.

Es un método visual del flujo de trabajo. Permite ver el progreso de las tareas.

En este curso vamos a construir una version mas simple Vamos ha crear algo como esto.

Al final tendremos un bonito panel de tareas Kaban o Trello.

Instalando Nuxt

Nuxt 3 install (opens new window)

Creo el proyecto con:

npx nuxi@latest init trello-tablero

• Contesto que si:

y

• Elijo la opción:

npm

• Contesto que no.

N

• Selecciono la carpeta del proyecto.

• Ya lo puedo lanzar.

npm run dev

Añadiendo módulos

• Vamos al archivo nuxt.config.ts. Aquí podemos definir los módulos que vamos a utilizar. No necesitamos el server side rendering ssr: false.

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  modules:[],
  ssr: false,
  
  devtools: { enabled: true }
})

Tailwind

1. CSS adicional
   • Tailwind CSS (opens new window) documentación para los estilos de CSS.
   • Nuxt Tailwind (opens new window) guía para la instalación

npm i -D @nuxtjs/tailwindcss

VueDraggable

2. Vamos a utilizar la biblioteca VueDraggable. Demo VueDraggable (opens new window) Instalación VueDraggable Next (opens new window) Nos dota de una fácil funcionalidad de arrastrar y soltar Tu puedes hacer cosas como reordenar una lista O arrastrar de una lista a otra una lista Clonar o hacer una bonita transición. En este caso trabajaremos con la biblioteca Sortable.JS

npm i -S vuedraggable@next

nanoID

3. Utilizaremos nanoID para generar ID automáticamente.

npm i nanoid 

Vue-Use

4. Usaremos VueUse (opens new window) En este caso utilizaresmos la función useKeyModifier (opens new window)

npm i @vueuse/nuxt

Añadiendo módulos

• Vamos a registrar los modulos:

modules:["@nuxtjs/tailwindcss", "@vueuse/nuxt"],

Font Awesome

5. Fuentes adicionales
   • Font Awesome (opens new window) documentación
   • Nuxt Font Awesom (opens new window). guía para la instalación

npm i --save @fortawesome/vue-fontawesome@latest-3

npm i --save @fortawesome/fontawesome-svg-core

npm i --save @fortawesome/free-solid-svg-icons

plugins/fontawesome.js

import { library, config } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { fas } from '@fortawesome/free-solid-svg-icons'

library.add(fas)

// This is important, we are going to let Nuxt worry about the CSS
config.autoAddCss = false

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component('font-awesome-icon', FontAwesomeIcon, {})
})

nuxt.config.ts

  css: [
    '@fortawesome/fontawesome-svg-core/styles.css'
  ],

Pinia

6. Utilizaremos Nuxt Pinia (opens new window) para crear una store.

npm install pinia @pinia/nuxt

nuxt.config.ts

  modules: [
    // ...
    '@pinia/nuxt',
  ],

Firebase

7. Utilizaremos la base de datos Firestore (opens new window)

npm install firebase

Archivo firebase.ts

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

const firebaseConfig = {
  apiKey: "AIzaSyCGak5QNXkTqerWSzlGk_ggpztV9d5nxH8",
  authDomain: "trello-93f5d.firebaseapp.com",
  databaseURL: "https://trello-93f5d-default-rtdb.europe-west1.firebasedatabase.app",
  projectId: "trello-93f5d",
  storageBucket: "trello-93f5d.appspot.com",
  messagingSenderId: "635225529291",
  appId: "1:635225529291:web:48befb5e930751df0e744e",
  measurementId: "G-XPJD17ZPBC"
};

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

export { db };

• Los otros son dependencias que importaremos directamente cuando las necesitemos.

• Finalmente ejecutaremos la aplicación

npm run dev