Como Integrar Vue JS y Ruby on Rails – Parte 1

Ruby on Rails | | Comunidad: Crear un Post, Eventos Devs, Foro

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:

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.

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.

Si corro el servidor de Ruby on Rails, ejecutando el siguiente comando.

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.

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.

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.

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

En el archivo application.html.erb instancio el archivo hello_vue.js que previamente se había creado.

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 

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.

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.

Newsletter

Suscríbete a Nuestro Boletín de Novedades:

(Luego de la suscripción no te va salir ningun mensaje. Solo revisa tu bandeja de Correo para confirmar tu suscripción)
* indicates required
Subscribirse
Notificar a
guest
0 Comments
Inline Feedbacks
View all comments