En esta página:
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:
- Que es Ruby on Rails (RoR) y otros detalles
- Tu primer Hola Mundo con Ruby on Rails
- Que es Vue JS, Historia y otros detalles
- Tu primer Hola Mundo con Vue JS
- Como crear un CRUD con Ruby on Rails 6 y Bootstrap 4 – Parte 1
- Como Integrar React JS (16.13.1) en Ruby on Rails (6.0.3.2)
- Como usar Scopes en Ruby on Rails
- Creando una Aplicación Web similar a SoundCloud con Ruby on Rails 6 y Angular 10 – Parte 1
- Lee más artículos en la categoría Ruby on Rails.
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
/integrar_vuejs26_rubyonrails6 ├── /app ├── /bin ├── /config ├── /db ├── /lib ├── /log ├── /node_modules ├── /public ├── /storage ├── /test ├── /tmp ├── /vendor ├── .browserslistrc ├── .gitignore ├── .ruby-version ├── babel.config.js ├── config.ru ├── Gemfile // Abro este Archivo ├── Gemfile.lock ├── package.json ├── postcss.config.js ├── Rakefile ├── README.md ├── yarn.lock |
Dentro del archivo agregamos la gema de Bootstrap 4.
|
1 2 3 4 |
# Gema 'Bootstrap 4' gem 'bootstrap', '~> 4.3.1' |
Y ejecutamos el siguiente comando para instalarla.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
bundle install Fetching gem metadata from https://rubygems.org/............. Fetching gem metadata from https://rubygems.org/. Resolving dependencies... Using rake 13.0.1 Using concurrent-ruby 1.1.7 Using i18n 1.8.5 Using minitest 5.14.2 Using thread_safe 0.3.6 Using tzinfo 1.2.7 Using zeitwerk 2.4.0 ... ... ... (Continua la Instalación) ... ... Using webdrivers 4.4.1 Using webpacker 4.3.0 Bundle complete! 15 Gemfile dependencies, 74 gems now installed. Use `bundle info [gemname]` to see where a bundled gem is installed. |
También instalaré la gema jquery-rails ya que Bootstrap 4 nos pide tener instalado jQuery para poder funcionar.
|
1 2 3 4 |
# Gema 'jQuery' gem 'jquery-rails' |
Voy a mi consola y ejecuto nuevamente el siguiente comando para instalar la gema jquery-rails
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
bundle install Fetching gem metadata from https://rubygems.org/............. Fetching gem metadata from https://rubygems.org/. Resolving dependencies... Using rake 13.0.1 Using concurrent-ruby 1.1.7 Using i18n 1.8.5 Using minitest 5.14.2 Using thread_safe 0.3.6 Using tzinfo 1.2.7 Using zeitwerk 2.4.0 ... ... ... (Continua la Instalación) ... ... Using webdrivers 4.4.1 Using webpacker 4.3.0 Bundle complete! 16 Gemfile dependencies, 75 gems now installed. Use `bundle info [gemname]` to see where a bundled gem is installed. |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
/integrar_vuejs26_rubyonrails6 ├── /app ├── /assets ├── /channels ├── /controllers ├── /helpers ├── /javascript ├── /channels ├── /packs ├── application.js // Abro este Archivo ├── hello_vue.js ├── app.vue ├── Postres.vue ├── /jobs ├── /mailers ├── /models ├── /views ├── /bin ├── /config ├── /db ├── /lib ├── /log ├── /node_modules ├── /public ├── /storage ├── /test ├── /tmp ├── /vendor ├── .browserslistrc ├── .gitignore ├── .ruby-version ├── babel.config.js ├── config.ru ├── Gemfile ├── Gemfile.lock ├── package.json ├── postcss.config.js ├── Rakefile ├── README.md ├── yarn.lock |
En el archivo application.js agrego las siguientes líneas.
|
1 2 3 4 5 |
//= require jquery3 //= require popper //= require bootstrap |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
/integrar_vuejs26_rubyonrails6 ├── /app ├── /assets ├── /config ├── /images ├── /stylesheets ├── app.scss // Abro este Archivo ├── application.css ├── /channels ├── /controllers ├── /helpers ├── /javascript ├── /jobs ├── /mailers ├── /models ├── /views ├── /bin ├── /config ├── /db ├── /lib ├── /log ├── /node_modules ├── /public ├── /storage ├── /test ├── /tmp ├── /vendor ├── .browserslistrc ├── .gitignore ├── .ruby-version ├── babel.config.js ├── config.ru ├── Gemfile ├── Gemfile.lock ├── package.json ├── postcss.config.js ├── Rakefile ├── README.md ├── yarn.lock |
Dentro del archivo app.scss importamos los estilos CSS de Bootstrap 4.
|
1 2 3 4 5 6 7 |
// Place all the styles related to the app controller here. // They will automatically be included in application.css. // You can use Sass (SCSS) here: https://sass-lang.com/ @import "bootstrap" |
Haré unas modificaciones al archivo app.vue que se encuentra en app > javascript > app.vue
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
/integrar_vuejs26_rubyonrails6 ├── /app ├── /assets ├── /channels ├── /controllers ├── /helpers ├── /javascript ├── /channels ├── /packs ├── app.vue // Abro este Archivo ├── Postres.vue ├── /jobs ├── /mailers ├── /models ├── /views ├── /bin ├── /config ├── /db ├── /lib ├── /log ├── /node_modules ├── /public ├── /storage ├── /test ├── /tmp ├── /vendor ├── .browserslistrc ├── .gitignore ├── .ruby-version ├── babel.config.js ├── config.ru ├── Gemfile ├── Gemfile.lock ├── package.json ├── postcss.config.js ├── Rakefile ├── README.md ├── yarn.lock |
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>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<template> <div class="container text-center mt-5"> <div class="row"> <div class="col-md-12"> <div id="app"> <h1>{{ titulo }}</h1> <!-- Componente Postres --> <Postres/> </div> </div> </div> </div> </template> <script> // Importo el componente 'Postres' import Postres from './Postres' export default { // Defino el componente 'Postres' components: { Postres, }, data: function () { return { titulo: "Lista de Postres" } } } </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.