Vue components
A día de hoy Bootstrap, Datatables, Datetimepicker y otras herramientas comunes tienen su versión en Vue.js (ya sean por los creadores oficiales o por terceros). Incluso nosotros hemos comenzado a crear nuestros propios componentes que, con un leve cambio de diseño y sin modificar el comportamiento, sean fáciles de integrar en nuestros proyectos.
Vamos a ver algunos ejemplos de como estos componentes nos facilitan el desarrollo.
Datatables
Lo que antes era una simple tabla en datatables, podía convertirse en un complejo código en HTML y js. Ahora se reduciría a algo mucho mas simple, limpio, fácil de mantener y con un mayor dinamismo con un código como este:
DateTimePicker
En este caso tenemos varios componentes hechos por diferentes desarrolladores, incluso nosotros tenemos nuestra versión de este componente, aunque todos convergen en su simpleza para declararlo. Aquí pondremos de ejemplo vue2-datepicker, que permite diferentes configuraciones y cubre casi todas las necesidades:
Pero que su simpleza no os confunda, permite cambiar el formato, idioma, días no disponibles, qué horas o minutos se pueden elegir, clases de los elementos (para integrarlo en una plantilla), etc... Incluso podemos interceptar los eventos para dar funcionalidades adicionales.
Bootstrap
En el caso de Bootstrap la cosa se magnifica, porque no tenemos un solo componente, sino que se trata de un conjunto de componentes y atributos para sustituir el antiguo Bootstrap entero. Ahora veremos un ejemplo de una página simple:
Dreams
Nuestro caso es un paso intermedio entre los componentes normales y el ecosistema de Bootstrap, incluso hemos convertido componentes js a vue. La idea de hacer esto surge de nuestra necesidad de que puedan comunicarse entre ellos de forma sencilla para crear aplicaciones complejas.