Buefy components are not working..

Published 5 months ago by Ibe

Hi there, I am having a problem with calling the components of buefy and I just can't figure out what's wrong with it... Anybody knows how I can solve this?

VERSIONS: Vue: "2.5.7" Buefy: "0.6.3"

CODE:

  • in my app.js file:
require('./bootstrap');

window.Vue = require('vue');
import Buefy from 'buefy';

Vue.use(Buefy);

 var app = new Vue({
  el: '#app',
   data: {}
 });
  • In my app.scss file:
// Variables
@import "variables";

// Font Awesome
@import "node_modules/font-awesome/scss/font-awesome";

// Bulma
@import "node_modules/bulma/bulma";

// Bulma Vue Modules
@import "node_modules/buefy/src/scss/buefy";
  • in my login.blade.php file:
@extends('_includes.nav.login')

@section('content')
<template>
    <section>

        <div class="field">
            <b-checkbox>Basic</b-checkbox>
        </div>
        
    </section>
</template>

@endsection
  • in my app.blade.php file :
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    @yield('styles')
</head>
<body>

    @include('_includes.nav.main')

    <div id="app">
      @yield('content')
    </div>

    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}"></script>
    @yield('scripts')
</body>
</html>

STEPS TO REPRODUCE: After using any of the components nothing is working.

EXPECTED BEHAVIOR: Expected to render a checkbox

ACTIAL BEHAVIOR: Doesn't render anything

JHkiehna

I think I have a solution. The Vue components are not being set up properly in app.js. Try this:

require('./bootstrap');

window.Vue = require('vue');
import Vue from 'vue'; 

import Buefy from 'buefy';
Vue.use(Buefy);

Then inside your view, instantiate the new view object wherever you are loading your scripts. For example, in a scripts section at the end of your view.

@section('scripts')
<script>
var app = new Vue({ 
     el: '#app', 
     data: {
     } 
});
</script>
@endsection

Finally, make sure what the scripts section is being imported by whatever layout your view is extending. For example is your view is extending layouts.app, in layouts.app, add this before the closing tag

<script src="{{ asset('js/app.js') }}"></script>

@yield('scripts')

It's important to also import your app.js from resources/assets/js/

Also don't forget to run:

npm run dev

in the root directory of your app so that your app.js is compiled properly with the Vue component.

I hope this helps someone.

Please sign in or create an account to participate in this conversation.