Buefy components are not working..

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

8 years ago

Level 1

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.

1 like

ttc007

7 years ago

Level 1

@JHKIEHNA - Thanks a bunch man. Wish you lot of success in life and please keep the participation active

Please or to participate in this conversation.