Cómo integrar BULMA en Vue

¿Qué es BULMA? ¿Cómo se integra Bulma en Vue?

A menudo nos encontramos en la situación de hacer una pagina web en el framework Vue pero no sabemos cómo hacer que nos quede presentable a nivel de diseño, para ello, hay un framework de CSS que se llama «Bulma», esta tiene librería que nos permitirá hacernos el trabajo de diseño mucho más sencillo ya que tiene muchos componentes los cuales podrás utilizar, modificar a nuestro gusto.

Crea una carpeta para almacenar el proyecto-Vue:

C:\Users\Sarto\Desktop\VUE BULMA

Crea un proyecto Vue dentro de la consola :

cd C:\Users\Sarto\Desktop\VUE BULMA\

«create vue bulmaproyecto«

cd C:\Users\Sarto\Desktop\VUE BULMA\bulmaproyecto

Escribimos «code .«para abrir el Visual Studio Code

Dentro de nuestro proyecto crearemos un componente y lo importaremos en nuestra app.

Una vez creado el proyecto dirígete a esta URL: https://bulma.io/

Cuando estés en la página tendrás que ir la sección de Docs/Overview/Start

https://bulma.io/documentation/overview/start/

Dentro de Start tendrás 2 códigos que utilizarás mas adelante

El primero que tendrás que colocar es el de la consola:

npm install bulma

El segundo que tendrás que colocar en el html.index es :

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">

Teniendo ya estas dos cosas puestas tanto en la consola como el proyecto, podremos dirigirnos

a la pagina web y escoger el elemento que querremos utilizar.

https://bulma.io/documentation/components/

En mi caso escogeré un «navbar«, lo copiaremos y lo pegaremos en el componente «BulmaComponent«.

A continuación abriremos el servidor: «npm run serve«

Finalmente podremos observar el componente que hemos insertado con Bulma

Espero que hayáis aprendido a como utilizar Bulma con Vue!

Un saludo.

Fernando Sartorius

Autor/a: Fernando Sartorius

Curso: Desarrollo Web Full Stack + MultiCloud con Azure y AWS

Centro: Tajamar

Año académico: 2022-2023

Código:

GitHub: https://github.com/Sartorius11/bulmaproyecto.git

Bulma: https://bulma.io/documentation/overview/start/

Linkedin: https://www.linkedin.com/in/fernando-sartorius-carreras-/