Installing Vue in Rails and Hello World

Vue is one of the newer JavaScript frameworks that’s slowly been gathering steam. It has a lot of useful documentation which will be helpful for more experienced developers. If you’re new to Vue and you use Rails, this article will show you how to install Vue into Rails and set up a “Hello World” message.

Prerequisites:

  • Ruby on Rails 4
  • Terminal Knowledge
  • TextEditor

Creating the Rails App

Start by creating a new Rails application in the terminal

rails new your-app-name

cd into your app…

cd your-app-name

and open it in your text editor

Installing Vue

Go to the Vue.js website’s installation page https://vuejs.org/guide/installation.html

Download the Development Version and find it in your download folder. Copy the download, and paste it in your app’s vendor/assets/javascripts folder. Make sure the file is saved under the name vue.js.

In app/assets/javascripts you need to require Vue, it’s best if you place it below the require jquery_ujs, like so

//= require jquery_ujs
//= require vue

I would also recommend removing the require turbolinks action in this file since turbolinks has a history of playing poorly with JavaScript frameworks.

There are two possible options for getting Vue to work with Rails. Either one will work, but the first will cause some problems if you decide to use jQuery plugins down the line, so I’d recommend the second.

The First Way

In app/views/layouts open your application.html.erb file and move the javascript_include tag below the yield, like so

<%= yield %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>

The Second Way

In app/assets/javascripts create your controller and make sure it ends with _ctrl.js, for ex. recipes_ctrl.js

In your newly created file add the following.

$(document).on('ready', function() {

})

All JavaScript related controller code will need to go in between this function. Both ways allow Vue to load the DOM elements before trying to access them, otherwise only a blank page will be loaded.

Building Hello World

All that needs to be done now is to set up the route, view, and controllers.

So lets create the rails controller first, I’ll be calling this controller recipes, but it can be called whatever you want to call it as long as it’s plural.

In the terminal type

rails g controller recipes

This action has now created your controller. So lets open that file in app/controllers/recipes_controller.rb and create a new index method.

class RecipesController < ApplicationController
 def index
 end
end

The rails controller at this point makes it possible for us to see our views, but the logic that we want to happen will need to be executed by JavaScript, which will have to be done in the JavaScript controller we created earlier. Before we get to that, we will first need to create a route.

In your config/routes.rb create an index route

Rails.application.routes.draw do
 get '/recipes' => 'recipes#index'
end

Now we can return to the Vue controller we created earlier in app/assets/javascripts/recipes_ctrl.js and create our new Vue instance.

$(document).on('ready', function() {
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello World!'
    }
  })
})

new Vue creates a new constructor instance of Vue. data contains the variable ‘message’, which holds the text ‘Hello World.’ el contains an HTML id equal to “app”, which leads to the final part of creating the “Hello World” message.

In app/views/recipes create a new file called index.html.erb. Create a div that contains an id equal to whatever you set el: to in the JavaScript controller. In this example it’s called app.  All your HTML logic must be placed between this div, otherwise the view won’t work. From here all we need to do is call our message variable like so

<div id="app">
  {{ message }}
</div>

In the terminal start up your server (if you haven’t done so already).

rails s

In the browser go to http://localhost:3000/recipes or whatever you named your route.

You should see your “Hello World!” message at the top of the screen.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s