Rails App

Building a Rails App with a Vue.js Frontend

Table of Contents

Ruby on Rails is a powerful web application framework that provides developers with a comprehensive set of tools for building complex web applications quickly and efficiently. However, when it comes to building modern, dynamic user interfaces, Rails is not always the best choice. That’s where Vue.js comes in.

Vue.js is a popular JavaScript framework for building user interfaces. It provides a set of tools and libraries for building interactive, data-driven interfaces that are fast and efficient. In this blog post, we’ll explore how to build a Rails app with a Vue.js frontend.

1. Setting up the Project

To get started, we’ll need to create a new Rails application. We’ll use the rails new command to create a new app called myapp:

$ rails new myapp

Once the app is created, we’ll need to add Vue.js to our project. There are several ways to do this, but the easiest is to use the vuejs-rails gem. We can add this to our Gemfile:

gem 'vuejs-rails'

Next, we’ll need to run bundle install to install the gem.

2. Creating a Vue.js Component

Now that we have Vue.js set up in our Rails project, let’s create a simple Vue.js component. Components are the building blocks of Vue.js applications. They are self-contained, reusable blocks of code that encapsulate HTML, CSS, and JavaScript. To create a new component, we’ll create a new file called mycomponent.vue in the app/assets/javascripts/components directory:

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="reverseMessage">Reverse Message</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        message: 'Hello, Vue!'
      }
    },
    methods: {
      reverseMessage() {
        this.message = this.message.split('').reverse().join('')
      }
    }
  }
</script>

<style>
  h1 {
    color: blue;
  }
</style>

This component displays a message and a button. When the button is clicked, the message is reversed.

To use this component in our Rails application, we’ll need to add it to our application.js file:

//= require vue
//= require mycomponent.vue

new Vue({
  el: '#app',
  components: {
    'my-component': mycomponent
  }
})

This code creates a new Vue.js instance and registers our mycomponent component with Vue.js. We’ll also need to add a container for our Vue.js app to our application.html.erb file:

<!DOCTYPE html>
<html>
<head>
  <title>MyApp</title>
  <%= csrf_meta_tags %>
  <%= csp_meta_tag %>
  <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
  <div id="app">
    <my-component></my-component>
  </div>
</body>
</html>

This code adds a container with an ID of app to our HTML file. This is where our Vue.js app will be mounted. We’ve also added our my-component component to this container.

3. Testing the Component

Now that we have our component set up, let’s test it. Start your Rails server by running:

$ rails server

Visit http://localhost:3000 in your browser to see your app.

You should see the message “Hello, Vue!” and a button labeled “Reverse Message”. Clicking the button should reverse the message.

Congratulations! You’ve just built your first Rails app with a Vue.js frontend.

4. Integrating with Rails

Now that we have a working Vue.js component in our Rails application, let’s integrate it with our backend. To do this, we’ll use the Rails asset pipeline to serve our Vue.js files and the Rails API to communicate with our backend.

First, we’ll need to create an API endpoint in our Rails app. We’ll create a new controller called api_controller.rb:

class ApiController < ApplicationController
  def message
    render json: { message: 'Hello from Rails!' }
  end
end

This controller returns a JSON object with a message.

Next, we’ll need to add a route for our API endpoint. We’ll add this to our config/routes.rb file:

Rails.application.routes.draw do
  get 'api/message'
  root 'welcome#index'
end

Now we can use fetch to call our API endpoint from our Vue.js component. Let’s modify our mycomponent.vue file to do this:

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="reverseMessage">Reverse Message</button>
    <button @click="fetchMessage">Fetch Message from Rails</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        message: 'Hello, Vue!'
      }
    },
    methods: {
      reverseMessage() {
        this.message = this.message.split('').reverse().join('')
      },
      fetchMessage() {
        fetch('/api/message')
          .then(response => response.json())
          .then(data => {
            this.message = data.message
          })
      }
    }
  }
</script>

<style>
  h1 {
    color: blue;
  }
</style>

This code adds a new button labeled “Fetch Message from Rails”. When the button is clicked, the fetchMessage method is called, which uses fetch to call our API endpoint. The response is then parsed as JSON and the message is updated.

5. Conclusion

In this blog post, we’ve explored how to build a Rails app with a Vue.js frontend. We’ve created a simple Vue.js component, integrated it with our Rails backend, and added interactivity using Vue.js methods. With these tools, you can create powerful, modern web applications that are fast and efficient.

By combining the strengths of both Rails and Vue.js, you can create web applications that are both powerful and easy to maintain. Happy coding!