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 noticed, we have passed vue as webpack option. This configuration option is provided by webpacker gem. There are many opther options available. You can find there here
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.
The above command will generate some controller, tests, JavaScript and CSS files.
Now we have to add root path in routes.rb file
We will keep our JavaScript files to app/javascripts/packs folder.
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.
Also notice the public/packs/js directory where all the compiled and imported JavaScript files are stored.
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!
Comments