Como Integrar Vue JS y Ruby on Rails – Parte 3 (Final)

5 minuto(s)

Demo Github

En segunda parte de este tutorial llamada Como Integrar Vue JS y Ruby on Rails – Parte 2, creamos un componente llamado Postres en donde listamos datos JSON en una tabla HTML, también instalamos el paquete NPM axios que nos permite leer datos JSON y con ello hicimos algo más que un simple mensaje Hello Vue!, recordemos que este mensaje lo mostramos en la Parte 1 de ese tutorial, en esta 3ra y última parte vamos a instalar Bootstrap 4 para estilizar la tabla HTML y exportaremos nuestro proyecto para producción, vamos con ello. 

Partes


Antes de continuar te invito a leer los siguientes artículos:

Asimismo te invito a escuchar el Podcast: “¿ Que Hago Si No Tengo Los Recursos Para Dedicarme A La Programación ?”:

Spotify: Sound Cloud:

Bien ahora continuemos con el Post: Como Integrar Vue JS y Ruby on Rails – Parte 3 (Final). 

Agregando Bootstrap 4

Para estilizar la interface, vamos a usar Bootstrap 4 mediante la gema bootstrap, abrimos el archivo Gemfile que se encuentra en el directorio principal del proyecto.


Dentro del archivo agregamos la gema de Bootstrap 4.


Y ejecutamos el siguiente comando para instalarla.


También instalaré la gema jquery-rails ya que Bootstrap 4 nos pide tener instalado jQuery para poder funcionar.


Voy a mi consola y ejecuto nuevamente el siguiente comando para instalar la gema jquery-rails


También podemos colocar de una vez todas las gemas en el archivo Gemfile e instalarlas al mismo tiempo, yo lo hice por partes para explicar a detalle como se hace.

Paso seguido vamos al archivo application.js que se encuentra en app/javascript/packs/application.js 


En el archivo application.js agrego las siguientes líneas.


Mediante las 3 líneas llamamos a jQuery, Popper.js(Se instalo automáticamente junto con la gema de Bootstrap) y la última línea llama a los archivos Javascript de Bootstrap 4. 

Para terminar de implementar Bootstrap 4 vamos a abrir el archivo llamado app.scss que se encuentra en app/assets/stylesheet/app.scss


Dentro del archivo app.scss importamos los estilos CSS de Bootstrap 4.


Haré unas modificaciones al archivo app.vue que se encuentra en app > javascript > app.vue


Dentro del archivo app.vue agrego ciertos divs con clases de Bootstrap 4 en las etiquetas <template></template> y el dato message lo cambio a titulo en las etiquetas <script></script> 


Si voy al navegador debo de ver los datos JSON en una tabla HTML de Bootstrap 4.

Hasta aquí este tutorial, al inicio de esta última parte he colocado un enlace al repositorio GitHub en donde he alojado en código fuente del proyecto, asimismo he colocado una Demo en todas las páginas del tutorial.

Conclusión

En este tutorial hemos aprendido a integrar Vue JS 2.6 y Ruby on Rails 6, asimismo hemos creado un proyecto en donde leemos datos en formato JSON mediante la librería axios y los datos los colocamos en una tabla HTML de Bootstrap 4. 

Nota (s)

  • El código y comandos compartidos en todo este tutorial pueden quedar obsoletos o quedar vigentes, esto no depende de mi, si no de los desarrolladores que dan soporte a Ruby, Vue JS, Axios, Ruby on Rails y Bootstrap 4.
  • No olvides que debemos utilizar la tecnología para hacer cosas buenas por el mundo. 

Síguenos en las Redes Sociales para que no te pierdas nuestros próximos contenidos.