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?
Setting Up Rails Application
Firstly, we need to create a rails application using the below command.
$ rails new vuerails
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.
$ rails webpacker:install:vue
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 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.
$ rails generate controller Articles index
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.
backend: bin/rails s -p 3000 frontend: bin/webpack-dev-server
When we run below command, it will initialize all the processes specified in the Procfile at the one terminal.
$ foreman start
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.