Vue is a progressive framework for building user interface.
In this article we are going to integrate Vue JS in our Ruby on Rails application.
If you have never installed yarn then please install it from here
Now, install Webpacker to your Rails application with following command.
You can also manually add Vue to Rails if your Rails application is already exists.
Now let's create a controller Home.
Now we have to add root path in routes.rb file
Let's create our first Vue file to create an instance of Vue.
Here el is used to declare the selector. data used for adding data required by the Vue instance.
Now we have to create our ERB file having div with same selector element. Here I have added some content with sample usage of Vue.
Also, we have to add this vueapp.js file to application.html.erb layout manifest file.
That's it!! Restart the server and open localhost:3000 in your browser. You will find the expected results.
When you will load the application for the first time, at that time it will take some time as webpacker is compiling the source. So don't worry about the performance at that time.
There are different browser extensions provided by Vue community which you can use to inspect your Vue components. You can get more details about Vue-tool over here
Hope you get some idea of using Vue JS in our Ruby on Rails application.
I will keep sharing more useful content. Keep following and Have a happy coding!