Si estás utilizando Vue.js en tus proyectos, te encantará Buefy. Porque se basa en el Framework Bulma. Bulma es un framework CSS de código abierto basado en Flexbox. Puedo decir que Tesla utiliza Bulma en algunos de sus proyectos. Si estás aburrido de Bootstrap, podría ser una buena opción para ti.
Bulma.io es un framework CSS moderno, pero lo que hace que Bulma sea agradable es que adopta un enfoque "mobile first" y utiliza flexbox para casi todo. Esto hace que cosas como el centrado (vertical) y los bloques de altura completa sean ridículamente fáciles.
Antes de empezar, necesitas instalar Vue.js como ya sabes. Eso es todo. Ahora hemos instalado Buefy. Ahora haremos algunas configuraciones en nuestro archivo main.js para usar Buefy. Pasaremos el componente Buefy al método 'use' de Vue.
Ok, hemos hecho todo para usar Buefy. Empecemos con un ejemplo simple.
Desarrollo de Componentes y Layouts
En esta publicación hablamos sobre Buefy y Vue. Puedes crear grandes proyectos con Buefy y Vue. Ha pasado un tiempo desde mi última actualización, pero desde entonces, he tenido muchas oportunidades de experimentar con proyectos paralelos y prototipos aleatorios con VueJs. Más recientemente, decidí desarrollar una interfaz de usuario básica para una aplicación de red social (llamada apropiadamente 'social-ui'), ya que sigue estando de moda, aprovechando un framework CSS realmente simple y bien documentado; bulma.io.
A esto lo llamo el 'top-down' (de arriba hacia abajo), ya que esa es la dirección en la que fluye el contenido, fluyendo siempre hacia abajo. Así es como terminé:
Por supuesto, en esta era de miles de tamaños de pantalla, también es responsive y, en pantallas más pequeñas, se ve así:
La navegación entre las subpáginas de Items, Collections y Following/Follower se basó en el enrutamiento anidado a través de Vue-Router.
Después de un tiempo, pensé que sería genial ver cómo se verían los mismos datos en un tipo de diseño diferente y decidí inspirarme en GitHub. Llamo a este tipo de diseño 'narrow-wide' (estrecho-ancho), porque esencialmente tiene dos columnas de contenido desequilibradas (estrecha a la izquierda, para los pocos pedantes). Por supuesto, para móviles, utilicé el mismo diseño (¡y código!) que el anterior.
Así que ahora tenía dos diseños diferentes (y por lo tanto componentes) y quería poder cambiar entre ellos para hacer comparaciones fáciles. Así que hice lo que haría cualquier desarrollador perezoso y añadí un randomizador :P
Estaba contento (para pruebas), pero me hubiera gustado hacer algo más inteligente como usar parámetros (o algún estado de una API) y permitir que cambiara a través de algún control.
Intenté hacerlo usando una parte parametrizada en la URL de tal manera que mis URLs parecieran: '/user/me' y '/user-layout-two/me', pero eso significaba dos rutas completamente diferentes, lo que tampoco permitía el hecho de que tuviera rutas anidadas. Obviamente, una pesadilla de mantenimiento con tanta duplicación. Además, había otros problemas como enlazar a ellos. Simplemente no funcionaría bien.
Ahora, la parte interesante de los componentes funcionales en VueJS. Estos se definen como componentes sin estado y sin instancia, lo que significa que tampoco tienen una 'plantilla' asociada. Esto te da el poder de tener una 'fábrica de componentes abstractos' que elige el componente correcto basándose en alguna información contextual. El ejemplo en la documentación de Vue es una 'lista inteligente', y probablemente puedas ver por qué este es un concepto tan poderoso.
Dado que también tenemos información contextual (la referencia `context.parent` es un poco hacky y hace algunas suposiciones de que este componente solo está en la raíz con una referencia a `$route`, pero sirvió mi propósito y es suficiente para este ejemplo), podemos obtener los parámetros de consulta de la URL. Esto me permitió hacer '/user/me?layout=narrow-wide' y cambiar los diseños inmediatamente, al mismo tiempo que los retuve durante la sesión y, lo mejor de todo, ¡sin meterme con la definición de las rutas!
Puedes ver que si quisiera más diseños de perfil, sería tan fácil como agregarlos a ese archivo y todo lo demás simplemente funcionaría. Hay algunas sutilezas, como que ProfileLayouts necesite un outlet para los hijos anidados, etc., pero en general, espero que puedas ver los beneficios que ofrece este enfoque.
Nota: En lugar de usar esa variable local, este enfoque podría llevarse más lejos almacenando dicha información en un store (por ejemplo, vuex), cookie, localstorage, etc.
Estoy seguro de que hay muchas otras formas inteligentes de aprovechar los componentes funcionales o de hacer lo mismo de otras maneras (como un componente estándar con `v-if`/`v-else`). Estoy bastante contento de haber encontrado esta característica y creo que es una excelente manera de agrupar componentes lógicamente similares bajo una única interfaz, y la omisión de estado y plantilla los hace verdaderamente 'abstractos' (a diferencia de un componente estándar con `v-if`/`v-else`).
En resumen, todavía amo VueJS y, si bien estoy seguro de que se podrían lograr cosas similares en Angular o React, fue muy fácil encontrarlo (y ejemplos) en su documentación.
Vue.js 2.7 Bulma Buefy Dashboard Template con Modo Oscuro
Este template de dashboard está construido con Vue.js 2.7, Bulma y Buefy. Soporta herramientas de construcción como Vue CLI y Vite, y es compatible con Laravel 9.x (stack Jetstream Inertia Vue).
Características Principales:
- Vue.js 2.7, Bulma y Buefy
- Herramientas de construcción Vue CLI & Vite
- Compatible con Laravel 9.x (Jetstream Inertia Vue stack) - Guía incluida
- Modo oscuro
- Scrollbars con estilo
- SPA con Vuex & Router
- Fuentes SCSS con variables
- Componentes reutilizables
- Responsive
Actualizado el 21 de Noviembre de 2022.
Estructura de Archivos y FAQ
La estructura de archivos está organizada para facilitar la gestión y el desarrollo. Puedes integrar este dashboard con el backend de tu elección. Las versiones premium son más avanzadas. ¡No dudes en consultar las demos!
Los ítems gratuitos están licenciados bajo MIT, por lo que debes conservar nuestros derechos de autor.