This article will discuss how to integrate VUE JS in a Ruby on Rails 6 application. Here’s how to start:
1
rails new rails-vue --webpack=vue
Now make sure your app/views/layouts/application.html.erb has hello_vue pack included.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>RailsVue</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'hello_vue', 'data-turbolinks-track': 'reload' %>
</head>
<body class="container">
<%= yield %>
</body>
</html>
We will be using a theme tabler to show the data in tabular form and axios for fetching data from the APIs.
1
2
yarn add tabler
yarn add axios
Make sure your app/javascript/packs/hello_vue.js looks like this:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# app/javascript/packs/hello_vue.js
import Vue from 'vue'
import App from '../app.vue'
import "bootstrap/dist/css/bootstrap.css";
import "tabler/scss/tabler.scss";
import 'tabler/js/tabler'
document.addEventListener('DOMContentLoaded', () => {
const app = new Vue({
render: h => h(App)
}).$mount()
document.body.appendChild(app.$el)
console.log(app)
})
Create app/javascript/packs/components/post.vue.
1
touch app/javascript/packs/components/post.vue
In the newly created file, put the following code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
# app/javascript/packs/components/post.vue
<template>
<div class="card">
<div class="card-header">
<h3 class="card-title">
Posts
</h3>
</div>
<table class="table card-table">
<thead>
<tr>
<th>Title</th>
<th>Body</th>
</tr>
</thead>
<tbody>
<tr v-for="post in posts" :key="post.title">
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
import axios from 'axios';
export default {
data: () => ({
posts: []
}),
created: function () {
this.fetchPosts();
},
methods: {
fetchPosts () {
axios.get('/posts').then(response => {
this.posts = response.data;
});
},
}
};
</script>
Add the Post component in the App component.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
# app/javascript/app.vue
<template>
<div id="app">
<p></p>
<post />
</div>
</template>
<script>
import post from './packs/components/post'
export default {
data: function () {
return {
message: "Hello Vue!"
}
},
components: {
post: post
}
}
</script>
<style scoped>
p {
font-size: 2em;
text-align: center;
}
</style>
Now add controllers.
1
2
rails generate controller Posts index
rails generate controller Landing index
PostsController will be used to explain how to fetch data from the Rails API through axios and LandingController will serve as the home page. Remove all the content from app/views/landing/index.html.erb.
Make sure your app/controllers/posts_controller.rb looks like this:
1
2
3
4
5
6
7
8
# app/controllers/posts_controller.rb
class PostsController < ApplicationController
def index
@posts = Post.all
render json: @posts
end
end
Now add a model.
1
2
rails generate model Post title body
rails db:create db:migrate
Configure routes.
1
2
3
4
5
config/routes.rb
root to: 'landing#index'
resources :posts
Add some records to test your API.
1
2
3
4
5
6
7
8
9
10
# db/seeds.rb
Post.create(title: "How to integrate Vue with Rails 6",
body: "This article will explain how to integrate Vue with Rails 6")
Post.create(title: "How to integrate React with Rails 6",
body: "This article will explain how to integrate React with Rails 6")
Post.create(title: "How to integrate Angular with Rails 6",
body: "This article will explain how to integrate Angular with Rails 6")
Now run rails server in one tab and bin/webpack-dev-server in another tab and open http://localhost:3000/ - you should see something like this:
Now you know how to integrate VUE JS in your Ruby on Rails application!