Introduce
Vuejs is a javascript framework used to build user interfaces. Vuejs easily meets the needs of building a Single Page Applications with high complexity. Vuejs is widely used with the php community, specifically the laravel framework, but in this article I will introduce you to a new combination that is Vuejs with Ruby On Rails.
So how to combine vuejs and rails, here I would like to introduce a support gem for integrating these two frameworks that is gem Webpacker .
What is webpacker?
Webpacker is a ruby gem used to integrate Webpack into Rails for use with Asset Pipeline. Webpack is simply a tool to encapsulate all js and css files (scss, sass ..). The webpack encapsulation is encapsulated according to the structure of the project, from module to module. With pre-complie coded Js in Rails, this gem is like an angel of salvation in integrating front-end frameworks like ReacJS, VueJS or AngularJS into Rails.
Use
Setting
To create a project with Rails and Vuejs, you simply need to use the command
1 2 | rails <span class="token keyword">new</span> <span class="token class-name">myapp</span> <span class="token operator">--</span> webpack <span class="token operator">=</span> vue |
However, if you want to integrate VueJS with an existing project, you can also do the following:
Install gem:
1 2 | gem 'webpacker', '~> 4.x' |
and run
1 2 3 4 | bundle rails webpacker <span class="token symbol">:install</span> rails webpacker <span class="token symbol">:install</span> <span class="token symbol">:vue</span> |
If the installation is successful, you will see a small message asking
1 2 | <span class="token constant">Webpacker</span> now supports <span class="token constant">Vue</span> <span class="token punctuation">.</span> js ? |
There is a little difference between a normal Rails project and a Rails + VueJS project. Have you noticed in the app/javascript will appear the following directory structure
1 2 3 4 5 6 | app <span class="token operator">/</span> javascript ├── app <span class="token punctuation">.</span> vue └── packs ├── application <span class="token punctuation">.</span> js └── hello_vue <span class="token punctuation">.</span> js |
Now that the installation is temporary, try rails s to see if anything happens 
Nothing’s changed right, don’t hurry, share or start right now.
First we create a view immediately
1 2 | rails g controller static_pages index |
Then go to config/routes.rb
1 2 3 4 | <span class="token constant">Rails</span> <span class="token punctuation">.</span> application <span class="token punctuation">.</span> routes <span class="token punctuation">.</span> draw <span class="token keyword">do</span> root to <span class="token punctuation">:</span> <span class="token string">'static_pages#index'</span> <span class="token keyword">end</span> |
OK so the default page has been set 
Now go to app/views/static_pages.erb delete everything instead of the following code
1 2 | <span class="token operator"><</span> <span class="token operator">%</span> <span class="token operator">=</span> javascript_pack_tag <span class="token string">'hello_vue'</span> <span class="token operator">%</span> <span class="token operator">></span> |
Reload the server one more time! 
Ok so we have successfully loaded VueJS, if you want to change the default printed text of VueJS when creating the project, you just need to go to app/javascript/app.vue to change
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <span class="token operator"><</span> template <span class="token operator">></span> <span class="token operator"><</span> div id <span class="token operator">=</span> <span class="token string">"app"</span> <span class="token operator">></span> <span class="token operator"><</span> p <span class="token operator">></span> <span class="token punctuation">{</span> <span class="token punctuation">{</span> message <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token operator"><</span> <span class="token operator">/</span> p <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> template <span class="token operator">></span> <span class="token operator"><</span> script <span class="token operator">></span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> data <span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">{</span> message <span class="token punctuation">:</span> <span class="token string">"Xin chào tất cả mọi người"</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token operator"><</span> <span class="token operator">/</span> script <span class="token operator">></span> <span class="token operator"><</span> style scoped <span class="token operator">></span> p <span class="token punctuation">{</span> font <span class="token operator">-</span> size <span class="token punctuation">:</span> <span class="token number">2</span> em <span class="token punctuation">;</span> text <span class="token operator">-</span> align <span class="token punctuation">:</span> center <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token operator"><</span> <span class="token operator">/</span> style <span class="token operator">></span> |
Result: 
Demo of summing two simple numbers using VueJS
You go to javascript/app.vue and replace the old code content with the new code as follows
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 | <span class="token operator"><</span> template <span class="token operator">></span> <span class="token operator"><</span> div id <span class="token operator">=</span> <span class="token string">"app"</span> <span class="token operator">></span> <span class="token constant">Number</span> <span class="token number">1</span> <span class="token punctuation">:</span> <span class="token operator"><</span> input type <span class="token operator">=</span> <span class="token string">"number"</span> name <span class="token operator">=</span> <span class="token string">"numA"</span> v <span class="token operator">-</span> on <span class="token symbol">:input</span> <span class="token operator">=</span> <span class="token string">"getNumA"</span> <span class="token operator">></span> <span class="token constant">Number</span> <span class="token number">2</span> <span class="token punctuation">:</span> <span class="token operator"><</span> input type <span class="token operator">=</span> <span class="token string">"number"</span> name <span class="token operator">=</span> <span class="token string">"numB"</span> v <span class="token operator">-</span> on <span class="token symbol">:input</span> <span class="token operator">=</span> <span class="token string">"getNumB"</span> <span class="token operator">></span> <span class="token operator"><</span> button <span class="token variable">@click</span> <span class="token operator">=</span> <span class="token string">"cal"</span> <span class="token operator">></span> <span class="token constant">T</span> ính tổng <span class="token operator"><</span> <span class="token operator">/</span> button <span class="token operator">></span> <span class="token operator"><</span> p <span class="token operator">></span> <span class="token punctuation">{</span> <span class="token punctuation">{</span> message <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token operator"><</span> <span class="token operator">/</span> p <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> template <span class="token operator">></span> <span class="token operator"><</span> script <span class="token operator">></span> export default <span class="token punctuation">{</span> data <span class="token punctuation">:</span> function <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> numA <span class="token punctuation">:</span> <span class="token number">0</span> <span class="token punctuation">;</span> numB <span class="token punctuation">:</span> <span class="token number">0</span> <span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token punctuation">{</span> message <span class="token punctuation">:</span> <span class="token number">0</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> methods <span class="token punctuation">:</span> <span class="token punctuation">{</span> getNumA <span class="token punctuation">:</span> <span class="token function">function</span> <span class="token punctuation">(</span> event <span class="token punctuation">)</span> <span class="token punctuation">{</span> this <span class="token punctuation">.</span> numA <span class="token operator">=</span> event <span class="token punctuation">.</span> target <span class="token punctuation">.</span> value <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> getNumB <span class="token punctuation">:</span> <span class="token function">function</span> <span class="token punctuation">(</span> event <span class="token punctuation">)</span> <span class="token punctuation">{</span> this <span class="token punctuation">.</span> numB <span class="token operator">=</span> event <span class="token punctuation">.</span> target <span class="token punctuation">.</span> value <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> cal <span class="token punctuation">:</span> <span class="token function">function</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> this <span class="token punctuation">.</span> message <span class="token operator">=</span> <span class="token function">Number</span> <span class="token punctuation">(</span> this <span class="token punctuation">.</span> numA <span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token function">Number</span> <span class="token punctuation">(</span> this <span class="token punctuation">.</span> numB <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token operator"><</span> <span class="token operator">/</span> script <span class="token operator">></span> <span class="token operator"><</span> style scoped <span class="token operator">></span> <span class="token comment">#app {</span> font <span class="token operator">-</span> size <span class="token punctuation">:</span> <span class="token number">2</span> em <span class="token punctuation">;</span> text <span class="token operator">-</span> align <span class="token punctuation">:</span> center <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token operator"><</span> <span class="token operator">/</span> style <span class="token operator">></span> |
Refresh the page and enjoy it. Result: 
References:
https://vuejs.org/v2/guide/
https://github.com/rails/webpacker