googleads
How To Create An Application using Rails With Vue JS
preloder
Web Development

How To Create An Application using Rails With Vue JS

In this blog, we will see how you can create an app using Rails and also how you can integrate Vue JS within the Rails application with simple steps. As you know, Rails work on MVC(Model – View – Controller) Architecture. Here we are going to replace view(V) part of rails with Vue.js.

Before we go in, Let’s have an Overview of Vue.js.

What is Vue.js?

Vue is an open source progressive javascript framework. It is used for developing UI (User Interface), especially used for building single-page applications. The core library is focused on the view layer. Vue is easy to integrate with other libraries and existing projects. 

Setting Up Rails Application

Firstly, we need to create a rails application using the below command.

Here I have used Foreman for initiating multiple processes at the same time. Now, add the following line into Gemfile to installing the foreman.

Then, run the bundle to install the foreman into the application.

Once the rails application setup is complete, we need to integrate Vue.js within our rails application. Run the below command to install vue.js into the application.

The above code creates hello_vue.js file under app/javascript/packs/ directory and also creates app.vue files under app/javascript/ directory with some basic codes.

The above code will wait for DOM tree loading, once the DOM tree is loaded, it will initialize the new Vue application. It works like Jquery ready() function. The el is the HTML element that Vue will use.

Now we can include javascript_pack_tag into layout file. javascript_pack_tag is a webpacker helper method that indicates files from the app/javascript/pack folder. Now we can include hello_vue.js file into app/views/layouts/application.html.erb file, which is the header section in the below code.

Now it’s the time to create a rails controller and to render the Vue component for viewing into our rails application. Using the below command we can generate controller. 

Now we can edit config/routes.rb file to set the Articles index page as the root page of our application.

Now it’s the time to render the Vue component within our rails application view. Add the following line into our app/views/articles/index.html.erb file.

Now we can run our rails server using foreman. Before starting foreman add the following code into Procfile at the root of the application directory.

When we run below command, it will initialize all the processes specified in the Procfile at the one terminal.

Now visit http://localhost:3000/ and you can see Vue is rendered on the rails application.


Have any doubts about setting up the application? comment your questions below.

Agira Technologies is a leading web and mobile development company. Looking for the ideal team of developers for your project? Hire your developer now! Make your dream a reality with our expertise and expand your business.

Turn your vision to magnificent reality With
Our Web and Mobile Solutions
The following two tabs change content below.

Arjunan Subramani

Senior Software Engineer | Around 4 Years of experience in Web development and Testing arena. Plus, hands on expertise in Ruby, Ruby on Rails, Watir, Ruby Cucumber.

Leave a Reply

Your email address will not be published. Required fields are marked *