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.

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

gem 'foreman'

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

bundle install

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 creates hello_vue.js file under app/javascript/packs/ directory and also creates app.vue files under app/javascript/ directory with some basic codes.

app/javascript/packs/hello_vue.js
import Vue from 'vue'
import App from '../app.vue'
document.addEventListener('DOMContentLoaded', () => {
  const app = new Vue({
   el: '#app',
    render: h => h(App)
  }).$mount()
})

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.

app/javascript/app.vue
<template>
  <div id="app">
    <h1>{{message}}</h1>
  </div>
</template>
<script>
  export default {
    data: function () {
      return {
        message: "Hello Vue!",
      }
    }
  }
</script>
<style scoped>
  h1 {
    font-size: 2em;
    text-align: center;
  }
</style>

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.

<%= javascript_pack_tag 'hello_vue' %>

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.

root 'articles#index'

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.

<div id="app"></div>

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.