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

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

Parte 1
Parte 2
Parte 3 (Final – Código Fuente GitHub)

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.

/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.

# Gema 'Bootstrap 4'
gem 'bootstrap', '~> 4.3.1'

Y ejecutamos el siguiente comando para instalarla.

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.

# Gema 'jQuery' 
gem 'jquery-rails'

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

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

/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.

//= 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

/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.

// 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

/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>

<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.