Ibe

Buefy components are not working...

Posted 10 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

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

Laracasts Mascot

Hi, Have We Met Yet?

Did you know that, in addition to the forum, Laracasts includes well over 1000 lessons on modern web development? All for the price of one lunch out per month.

Sign Me Up

Channels

Reply to

Use Markdown with GitHub-flavored code blocks.