Setup for Vue and Buefy in Rails 6

Be be sure you have node js, ruby and Ruby on Rails installed in your device

rails -v #6.0.1

node -v #10.0.0

ruby -v #2.6.6

then we create a new app using rails webpack vue template

rails new app --webpack=vue --database=postgresql

the command above generates a new rails project with a default vuejs framework and postgres as its database

success Saved 12 new dependencies.
info Direct dependencies
├─ vue-loader@15.9.1
├─ vue-template-compiler@2.6.11
└─ vue@2.6.11
info All dependencies
├─ @vue/component-compiler-utils@3.1.1
├─ consolidate@0.15.1
├─ de-indent@1.0.2
├─ he@1.2.0
├─ merge-source-map@1.1.0
├─ prettier@1.19.1
├─ vue-hot-reload-api@2.3.4
├─ vue-loader@15.9.1
├─ vue-style-loader@4.1.2
├─ vue-template-compiler@2.6.11
├─ vue-template-es2015-compiler@1.9.1
└─ vue@2.6.11
 Done in 15.62s.
 Webpacker now supports Vue.js 🎉

here we finished creating our rails project we can now move into the folder and start the rails server

cd app 
rails db:create # this creates a postgresql database
rails s

=> Booting Puma
=> Rails 6.0.2.2 application starting in development 
=> Run `rails server --help` for more startup options
    Puma starting in single mode...
    * Version 4.3.3 (ruby 2.5.1-p57), codename: Mysterious Traveller
    * Min threads: 5, max threads: 5
    * Environment: development
    * Listening on tcp://127.0.0.1:3000
    * Listening on tcp://[::1]:3000
 Use Ctrl-C to stop

so this shows our rails app when go to localhost:3000

Next we have to install the plugins that we need to build our app

yarn add buefy 
yarn add vue-turbolinks

buefy is our css framework made from bulma you can find more here

vue-turbolinks is a package to allow you to easily add Vue.js components to your Turbolinks powered apps.

Replace the content of the hello_vue.js with the following

// app > javascript > packs > hello_vue.js

import TurbolinksAdapter from 'vue-turbolinks'
import Vue from 'vue/dist/vue.esm'
import App from '../app.vue'
import Buefy from 'buefy'
import 'buefy/dist/buefy.css'

Vue.use(Buefy)
Vue.use(TurbolinksAdapter)

document.addEventListener('turbolinks:load', () => {
   const app = new Vue({
      el: '#hello',
        data: () => {
          return {
            message: "Can you say hello?"
          }
        },
       components: { App }
      })
    })

from the snippet above we imported the vuejs library, buefy , an App Component and the TurbolinksAdapter we register the plugins with vue with Vue.use Lastly we created a new vue app by instantiating vue on the webpage after its content Loaded

in app/views/layouts/application.html.erb

<!--app/views/layouts/application.html.erb -->
<%= stylesheet_pack_tag 'hello_vue' %>
<!-- the lines above imports the hello_vue css file and mounts it here..-->
<%= javascript_pack_tag 'hello_vue' %>
<!-- the lines above imports the hello_vue js file and mounts it here..-->

 <body>
     <div id="hello">
       <%= yield %>
     </div>
 </body>

here we put the yeild keyword inside the div with an id="hello" this helps vue select this element and possible mounts vue on the entire rails app

Next lets create buttons on the home page simple button

Jumping of to our terminal we generate a new controller called the index controller

rails g controller button index

and in our routes file we set the index page

#config/routes.rb

Rails.application.routes.draw do
      get '/' => "button#index"
end

so lets create a button.vue component

create a new file called button.vue in app/javascript/

//button.vue

<template> 
 <div>
   <b-button type="is-primary"> Click Me </b-button>
 </div>
</template>

<script>

<script>

Next we have to let vue know that our component exist so we import it into hello_vue.js

import your new components and register it with the components object in hello_vue.js

//hello_vue.js
import ButtonComponent from '../button.vue'

components:{App , ButtonComponent}

Next step is mounting the Button component on the Vue app

simply put

//app / views/ Button  /index

<ButtonComponent></ButtonComponent>

great your app should show our beautiful button there

Next lets return an array of styles for multiple colors of our buttons

# app/controllers/in button_controller.rb

def index
    @colors = ["primary", "dark", "light", "white"]
end

to recieve this information in our vue app we simply convert it to json and pass it through as props

# app / views/ Button / index

<ButtonComponent :colors="<%= #{@colors.to_json} %>" > <ButtonComponent/>

<template> 
   <div>
        <b-button  
            :type="`is-${color}`" 
            v-for="(color , i ) in colors" 
            :key="i" 
        > 
            {{color}}
        </b-button>
    </div>
</template>

<script>
    export default{
        props:[colors]
    }
<script>

Here that's all You need to get your app working

Setup for Vue and Buefy in Rails 6

Subscribe to my newsletter

Jonathan Atiene

Jonathan Atiene