TheLazy.Dev
Portfolio GitHub

Blog

rails |ruby |vue |buefy

Setup for Vue and Buefy in Rails 6

mixed_code

Jonathan Atiene

Posted on April 1, 2020

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
Enter fullscreen mode Exit fullscreen mode

then we create a new app using rails webpack vue template 

rails new app --webpack=vue --database=postgresql
Enter fullscreen mode Exit fullscreen mode

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 🎉
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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 }
  })
})
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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}
Enter fullscreen mode Exit fullscreen mode

Next step is mounting the Button component on the Vue app

simply put

//app / views/ Button  /index

<ButtonComponent></ButtonComponent>
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

💖 💪 🙅 🚩
mixed_code
Jonathan Atiene

Posted on April 1, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Setup for Vue and Buefy in Rails 6
rails Setup for Vue and Buefy in Rails 6

April 1, 2020