CODEWITHSUNDEEP
laravelvue.jsvue-componentbulma
Belciug Ovidiu-Mihai
Belciug Ovidiu-Mihai

Reputation: 52

Buefy not working

I want to put a simple buefy checkbox in a login page but it's not showing (it's shows just the text "Remember me").I want to use buefy with Laravel, and bulma of course. I already try to change the versions but it's not working. Login page:

@extends('layouts.app')

@section('content')

<div id="app">

<div class="columns m-t-75">
    <div class="column is-one-third is-offset-one-third">
        <div class="card">
            <div class="card-header-title">
                <h1 class="title" style="font-weight: 100">Log in</h1>
            </div>

            <div class="card-content">
                <div class="field">
                    <label for="email" class="label">Email Adress</label>
                    <div class="control">
                        <input type="email" class="input" name="email" id="email">
                    </div>
                </div>
                <div class="field">
                    <label for="email" class="label">Password</label>
                    <div class="control">
                        <input type="password" class="input" name="password" id="password">
                    </div>
                </div>

                <b-checkbox name="remember">Remember me</b-checkbox>

                <button class="button is-success is-outlined is-fullwidth">Log in</button>
            </div>
        </div>
    </div>
</div>

</div>

@endsection

Footer

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

app.js

require('./bootstrap');

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

Vue.use(Buefy);

package.json

"devDependencies": {
    "axios": "^0.16.2",
    "buefy": "^0.5.3",
    "bulma": "^0.5.3",
    "cross-env": "^5.0.1",
    "jquery": "^3.1.1",
    "laravel-mix": "^1.0",
    "lodash": "^4.17.4",
    "vue": "^2.1.10"
},
"dependencies": {
    "font-awesome": "^4.7.0"
}

Upvotes: 2

Views: 4391

Answers (2)

Nilesh gurung
Nilesh gurung

Reputation: 1

Add vue component to app.js file. for eg:

require('./bootstrap');

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

Vue.use('Buefy');

Vue.component(Buefy.Checkbox.name, Buefy.Checkbox);
var app = new Vue({
  el: '#app',
  data: {
  }
});

Upvotes: 0

Maniruzzaman Akash
Maniruzzaman Akash

Reputation: 5025

You must have to bind your #app div like after 

require('./bootstrap')
window.Vue = require('vue')
import Buefy from 'buefy'
Vue.use(Buefy)

//Must have to bind this to work with VUE js
const app = new Vue({
 el: '#app'
});

You've to know that Buefy uses Vue js. And in Vue it must need to wrap the whole document.

You have to create a new vue instance with wrapping the div #app.

Upvotes: 2

Related Questions