11 months ago

When logged in as a user the buefy stop working in Laravel using Vue

Posted 11 months ago by forteirp

i recently learning about Laravel using vue...

I'm using Laravel 5.8, Bulma 0.7.5, Buefy 0.8.1, and Vue

My issue is that when I'm logged-out the Buefy CSS works fines but ones I log-in, it stops working...

Here's are a few screenshots so you can see what I'm talking about...

Here's what it looks like when I'm logged-out

and here's what it looks like when I'm log-in

Here's my app.js


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

var app = new Vue({
            el: '#app',
             data() {
                return {
                    auto_password:      true,
                    password_options: 'keep'

and here's My cpanel.blade.php

    <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

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

    <title>{{ config('', 'EthicallySpeaking') }}</title>

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

    <!-- Fonts 
    <link rel="dns-prefetch" href="//">
    <link href="" rel="stylesheet">-->

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

    <div id="app">
        <div id="app" class="cpanel-dashboard-area flex-container">       

and here's the edit.php form that I'm having the issue with...


<section class="section">
        <div class="container">
            <div class="columns m-l-10">
                <div class="column is-10">
                    <h1 class="title">Edit User Profile</h1>
                </div><!-- end column is-10 -->
            </div><!-- end columns -->
        <div class="columns">
                <div class="column">
            <form action="{{route('users.update', $user->id)}}" method="POST">
            {{method_field ('PUT')}}
                <div class="field">
                    <label for="name" class="label">Name</label>
                    <p class="control">
                        <input type="text" class="input" name="name" id="name" value="{{$user->name}}">
                <div class="field">
                    <label for="email" class="label">Email</label>
                    <p class="control">
                        <input type="text" class="input" name="email" id="email" value="{{$user->email}}">
                <div class="field">
                    <label for="password" class="label">Password</label>
                        <div class="field">
                            <b-radio v-model="password_options" native-value="keep" name="permission_type">Do Not Change Password</b-radio>
                        <div class="field">
                            <b-radio v-model="password_options" native-value="auto" name="permission_type">Auto-Generate New Password</b-radio>
                         <div class="field"> 
                            <b-radio v-model="password_options" native-value="manual" name="permission_type">Manually Set New Password</b-radio>
                                <p class="control">
                                    <input type="text" class="input" name="password" id="password" v-if="password_options == 'manual'" placeholder="Manually give a password to this user"> 
                <button class="button is-success m-t-20">Edit User</button>
            </div><!-- end column is-10 -->
            </div><!-- end columns -->
       </div><!-- end container -->


I wanted to know if anyone know why this is happing?

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