En esta página:
Demo
Las librerías, herramientas o Frameworks para crear interfaces Front, nos facilitan el desarrollo de estas vistas de manera ordenada, ágil y siguiendo mejores prácticas que las habituales, no digo que hagan todo el trabajo perfecto, porque no todo es perfecto en algunas ocasiones, pero si es lo mejor para desarrollar interfaces Front, vale la pena usarlas. En Ruby on Rails (RoR) podemos hacer uso de de Vue JS, pero primero debemos de saber como integrar ambas herramientas y en este post te enseñare como hacerlo.
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: “Razones Por Las Cuales Te Cuesta Aprender A Programar”:
| Spotify: | Sound Cloud: |
 |
 |
Bien ahora continuemos con el Post: Como Integrar Vue JS y Ruby on Rails – Parte 1.
Nuevo Proyecto en Ruby on Rails (RoR)
Vamos a crear un nuevo proyecto en Ruby on Rails ejecutando el siguiente comando.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
rails new integrar_vuejs26_rubyonrails6 ... ... (Continua la Creación del Proyecto) ... ├─ unpipe@1.0.0 ├─ utils-merge@1.0.1 ├─ wbuf@1.7.3 ├─ webpack-dev-middleware@3.7.2 ├─ webpack-dev-server@3.11.0 └─ ws@6.2.1 Done in 20.8s Webpacker successfully installed |
Luego de Crear el proyecto, Ruby on Rails (RoR), me ha creado un conjunto de directorios y archivos útiles para que el proyecto funcione correctamente.
|
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 ├── Gemfile.lock ├── package.json ├── postcss.config.js ├── Rakefile ├── README.md ├── yarn.lock |
Si corro el servidor de Ruby on Rails, ejecutando el siguiente comando.
|
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 |
rails server ? rails s => Booting Puma => Rails 6.0.3.4 application starting in development => Run `rails server --help` for more startup options *** SIGUSR2 not implemented, signal based restart unavailable! *** SIGUSR1 not implemented, signal based restart unavailable! *** SIGHUP not implemented, signal based logs reopening unavailable! Puma starting in single mode... * Version 4.3.6 (ruby 2.7.1-p83), codename: Mysterious Traveller * Min threads: 5, max threads: 5 * Environment: development * Listening on tcp://[::1]:3000 * Listening on tcp://127.0.0.1:3000 Use Ctrl-C to stop Started GET "/" for ::1 at 2020-10-17 02:16:33 -0500 (14.8ms) SELECT sqlite_version(*) Processing by Rails::WelcomeController#index as HTML Rendering C:/Ruby27/lib/ruby/gems/2.7.0/gems/railties-6.0.3.4/lib/rails/templa tes/rails/welcome/index.html.erb Rendered C:/Ruby27/lib/ruby/gems/2.7.0/gems/railties-6.0.3.4/lib/rails/templat es/rails/welcome/index.html.erb (Duration: 25.2ms | Allocations: 373) Completed 200 OK in 114ms (Views: 61.3ms | ActiveRecord: 0.0ms | Allocations: 22 25) |
Debo de ver la página por defecto que Ruby on Rails genera al crear un nuevo proyecto, debo de ir a la dirección local http://localhost:3000/
Bien ya tenemos creado el proyecto en Ruby on Rails, ahora pasaremos a integrarlo con Vue JS.
Integración con Vue JS
Para este tutorial estoy usando la última versión de Ruby on Rails la cual es la 6.0.3.4 y viene con el gestor de paquetes web Webpack, entonces voy a mi consola de comandos y ejecuto el siguiente comando para instalar Vue JS.
|
1 2 3 4 5 6 7 |
rails webpacker:install:vue ... ... (Continua la Instalación) ... |
Luego de ejecutar el siguiente comando, se me ha creado el archivo app.vue en app > javascript > app.vue que es un componente que se ha creado por defecto y el archivo hello_vue.js en app > javascript > packs > hello_vue.js el cual es un archivo JavaScript que conecta el componente app.vue con la vista HTML.
|
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 ├── /channels ├── /controllers ├── /helpers ├── /javascript ├── /channels ├── /packs ├── application.js ├── hello_vue.js // Archivo JavaScript ├── app.vue // Componente 'App' ├── /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 |
Por el momento no voy a mover nada, para ver como renderiza Ruby on Rails el componente App que se ha creado por defecto.
Creación de un Controlador en Ruby on Rails
Voy a crear un controlador con una vista HTML index para allí mostrar el componente App de Vue JS, ejecuto el siguiente comando.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
rails g controller app index create app/controllers/app_controller.rb route get 'app/index' invoke erb create app/views/app create app/views/app/index.html.erb invoke test_unit create app/controllers/app_controller_test.rb invoke helper create app/helpers/app_helper.rb invoke test_unit invoke assets invoke scss create app/assets/stylesheets/app.scss |
Luego de ejecutar el comando anterior, podemos ver que la consola nos ha mostrado las rutas de los archivos que han sido creados.
Abrimos el archivo application.html.erb que se encuentra en app > views > layouts > application.html.erb
|
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 43 44 |
/integrar_vuejs26_rubyonrails6 ├── /app ├── /assets ├── /channels ├── /controllers ├── /helpers ├── /javascript ├── /channels ├── /packs ├── application.js ├── hello_vue.js ├── app.vue ├── /jobs ├── /mailers ├── /models ├── /views ├── /app ├── /layouts ├── application.html.erb // Abro este Archivo ├── /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.html.erb instancio el archivo hello_vue.js que previamente se había creado.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html> <head> <title>IntegrarVuejsRubyonrails</title> <%= csrf_meta_tags %> <%= csp_meta_tag %> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> <!-- Instanciamos el archivo 'hello_vue.js' --> <%= javascript_pack_tag 'hello_vue' %> </head> <body> <%= yield %> </body> </html> |
Ahora voy a configurar la ruta, voy a reemplazar la vista por defecto que Ruby on Rails me había creado y la reemplazaré por la vista index.html.erb que se me creo al generar mi controlador app anteriormente.
Abro el archivo routes.rb que se encuentra en config > routes.rb
|
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 ├── /bin ├── /config ├── /environments ├── /initializers ├── /locales ├── /webpack ├── application.rb ├── boot.rb ├── cable.yml ├── credentials.yml.enc ├── database.yml ├── environment.rb ├── master.key ├── puma.rb ├── routes.rb // Abro este Archivo ├── storage.yml ├── webpacker.yml ├── /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 routes.rb comento la ruta que había por defecto y agrego una ruta que apunte al controlador app y llame a su método index.
|
1 2 3 4 5 6 7 8 9 10 |
Rails.application.routes.draw do # get 'app/index' # Apunto al controlador 'app' y llamo a su método 'index' root :to => "app#index" # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html end |
Si corro el servidor nuevamente y voy a la ruta local http://localhost:3000/ puedo ver que me carga mi vista con el componente App que muestra el mensaje Hello Vue!
Con ello entonces verifico que tengo integrado Vue JS en Ruby on Rails 6.
Bien hasta aquí terminamos esta primera parte en donde creamos un nuevo proyecto con Ruby on Rails 6, instalamos Vue JS y verificamos si se integro correctamente Vue JS en Ruby on Rails.
Ten Paciencia, lo que quiero es que conozcas bien como crear este proyecto y no llenarte el capitulo de mucho contenido porque te puedes marear y no tendrás un óptimo aprendizaje.
Nota (s)
- En la 2da parte de este tutorial vamos a cargar una tabla con datos JSON y otros detalles.
- No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo.
Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.