{% raw %}
Vue (pronounced as view) calls itself the progressive JavaScript framework. It is designed to be incrementally adoptable. You can use Vue to build user interfaces on a few pages or a few areas of an existing Rails view. You don’t have to throw away existing Rails code.
Vue can also be used as a full-featured framework by using supporting Vue libraries in addition to the core library. This post is about using Vue with an existing Rails application. While we are going to create a new Rails application as an example, we will also create a Rails view and add Vue to it.
This is divided into these sections:
- Create a Rails application
- Hello Vue
- v-bind
- v-if
- v-for
v-on - v-model
webpack -dev-servervue –devtools - What’s Next
Create a Rails application
We’ll begin by creating a new Rails 5.1 application. Turbolinks works with Vue but we’ll skip it since we’re not going to use it.
rails new vueapp --skip-turbolinks --webpack=vue
We --webpack=vue
When using Asset Pipeline, you put your JavaScript code app/assets/javascript
app/javascript/packs
rails new
Create a controller and a view.
rails generate controller Pages welcome
Set the welcome action as the root of your app. Edit config/routes.rb
root 'pages#welcome'
Hello Vue
Rails app/javascript/packs/hello_vue.js
import Vue from 'vue/dist/vue.esm'
document.addEventListener('DOMContentLoaded', () => {
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
})
This code creates a new Vue app and we pass el
data
el
is the HTML element that Vue will use. You can see below that this is a div with an id of
app/views/pages/welcome.html.erb
<h1>Pages#welcome</h1>
<div id='app'>
{{ message }}
</div>
message
data
{{ message }}
app/views/layouts/application.html.erb
javascript_pack_tag
head
<%= javascript_pack_tag 'hello_vue' %>
Start your Rails app rails s
Pages#welcome
Hello Vue!
You now have Vue working
This example shows that you can pass message
{{ message }}
Let’s take a look at other features of Vue. You can use the same files – welcome.html.erb
for the HTML code hello_vue.js
div
) goes to the Rails view. The second code (new Vue
) goes to the JavaScript file.
v-bind
v-bind
binds the element attributes, in this title
<div id='app-2'>
<span v-bind:title='message'>
Hover your mouse over me for a few seconds
to see my dynamically bound title!
</span>
</div>
var app2 = new Vue({
el: '#app-2',
data: {
message: 'You loaded this page on ' + new Date().toLocaleString()
}
})
v-if
v-if
toggles the presence of an element depending on its value.
<div id='app-3'>
<span v-if='seen'>Now you see me</span>
</div>
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
v-for
v-for
goes through each item on an Array.
<div id='app-4'>
<ol>
<li v-for='todo in todos'>
{{ todo.text }}
</li>
</ol>
</div>
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue' },
{ text: 'Build something awesome' }
]
}
})
v-on
v-on
attaches a method to event listeners.
<div id='app-5'>
<p>{{ message }}</p>
<button v-on:click='reverseMessage'>Reverse Message</button>
</div>
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
reverseMessage
methods
v-model
v-model
creates a two-way binding between form input and app state.
<div id='app-6'>
<p>{{ message }}</p>
<input v-model='message'>
</div>
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})
While typing text <p>
webpack -dev-server
Rails through webpack-dev-server
bin/webpack-dev-server
vue –devtools
Install the Vue
What’s Next
The examples on this post are from the official guide. We’ve barely scratched the surface on the Vue framework. We put the Vue code inside our Rails application but we haven’t really integrated the two. Next, we’ll discuss Vue components and integrate Vue with Rails.
{% endraw %}