I am using Laravel 6 and my login doesn't work.
I started with php artisan make:auth and tested the login. It worked. Then I made a custom login page. My problem is that my custom login page doesn't work. When I click login it just reloads the page without doing anything. Can I debug it somehow? Here is my code of login.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<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('app.name', 'CMS Buddy') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet" type="text/css">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<script src="https://kit.fontawesome.com/fd2bd3b3b6.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="limiter">
<div class="container-login100" style="background-image: url('img/background_login.jpg');">
<div class="wrap-login100 p-t-190 p-b-30">
<form class="login100-form validate-form" method="POST" action="{{ route('login') }}">
#csrf
<div class="login100-form-avatar">
<img src="img/logo.png" alt="Logo">
</div>
<span class="login100-form-title p-t-20 p-b-45">
CMS Buddy
</span>
<div class="wrap-input100 validate-input m-b-10 {{ $errors->has('email') ? ' is-invalid': '' }}"
data-validate="E-Mail address is required">
<input class="input100" type="text" name="email" placeholder="{{ __('E-Mail Address') }}">
<span class="focus-input100"></span>
<span class="symbol-input100">
<i class="fa fa-user"></i>
</span>
#if ($errors->has('email'))
<span class="invalid-feedback" role="alert">
<strong>{{ $errors->first('email') }}</strong>
</span>
#endif
</div>
<div class="wrap-input100 validate-input m-b-10" data-validate="Password is required">
<input class="input100" type="password" name="{{ __('Password') }}"
placeholder="{{ __('Password') }}">
<span class="focus-input100"></span>
<span class="symbol-input100">
<i class="fa fa-lock"></i>
</span>
#if ($errors->has('password'))
<span class="invalid-feedback" role="alert">
<strong>{{ $errors->first('password') }}</strong>
</span>
#endif
</div>
<div class="container-login100-form-btn p-t-10">
<button type="submit" class="login100-form-btn">
{{ __('Login') }}
</button>
</div>
<div class="text-center w-full p-t-25 p-b-230">
#if (Route::has('password.request'))
<a class="txt1" href="{{ route('password.request') }}">
{{ __('Forgot Your Password?') }}
</a>
#endif
</div>
</form>
</div>
</div>
</div>
<script src="{{ asset('js/login/select2.min.js') }}"></script>
<script src="{{ asset('js/login/main.js') }}"></script>
</body>
</html>
I think your password cause these. The validation will return probably "The password field is required".
Mispelled capital "P" for password name attribute.
Change these:
<input class="input100" type="password" name="{{ __('Password') }}" placeholder="{{ __('Password') }}">
To these:
<input class="input100" type="password" name="{{ __('password') }}" placeholder="{{ __('Password') }}">
The page doesn't reload, it's redirecting back for failed validation....
Why?
Because you're missing the password field in your form
Change
name="{{ __('Password') }}"
to
name="password"
The __() function is useful to localize or translate text for your users, however the name attribute is not rendered* in the browser so it doesn't need to be localized..
Laravel expects the form to post email and password
Related
I'm having a difficult time getting Vue to work in a blade.php page I have in my laravel website.
Here is the blade page code:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght#400;600;700&display=swap" rel="stylesheet">
<!-- Custom css -->
<link href="{{ url('sass/custom.scss.css') }}" type="text/css" rel="stylesheet">
<!-- Fav icon -->
<link rel="icon" type="image/png" href="{{ url('omnisection.png') }}">
<!-- development version, includes helpful console warnings -->
<script src="{{ mix('/js/vue.js') }}"></script>
<script src="{{ mix('/js/app.js') }}"></script>
<script src="{{ mix('/js/RecordRTC.js') }}"></script>
<script src="{{ mix('/js/customrecrtc.js') }}"></script>
<!-- Styles -->
<style>
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}a{background-color:transparent}[hidden]{display:none}html{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}*,:after,:before{box-sizing:border-box;border:0 solid #e2e8f0}a{color:inherit;text-decoration:inherit}svg,video{display:block;vertical-align:middle}video{max-width:100%;height:auto}.bg-white{--bg-opacity:1;background-color:#fff;background-color:rgba(255,255,255,var(--bg-opacity))}.bg-gray-100{--bg-opacity:1;background-color:#f7fafc;background-color:rgba(247,250,252,var(--bg-opacity))}.border-gray-200{--border-opacity:1;border-color:#edf2f7;border-color:rgba(237,242,247,var(--border-opacity))}.border-t{border-top-width:1px}.flex{display:flex}.grid{display:grid}.hidden{display:none}.items-center{align-items:center}.justify-center{justify-content:center}.font-semibold{font-weight:600}.h-5{height:1.25rem}.h-8{height:2rem}.h-16{height:4rem}.text-sm{font-size:.875rem}.text-lg{font-size:1.125rem}.leading-7{line-height:1.75rem}.mx-auto{margin-left:auto;margin-right:auto}.ml-1{margin-left:.25rem}.mt-2{margin-top:.5rem}.mr-2{margin-right:.5rem}.ml-2{margin-left:.5rem}.mt-4{margin-top:1rem}.ml-4{margin-left:1rem}.mt-8{margin-top:2rem}.ml-12{margin-left:3rem}.-mt-px{margin-top:-1px}.max-w-6xl{max-width:72rem}.min-h-screen{min-height:100vh}.overflow-hidden{overflow:hidden}.p-6{padding:1.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.pt-8{padding-top:2rem}.fixed{position:fixed}.relative{position:relative}.top-0{top:0}.right-0{right:0}.shadow{box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06)}.text-center{text-align:center}.text-gray-200{--text-opacity:1;color:#edf2f7;color:rgba(237,242,247,var(--text-opacity))}.text-gray-300{--text-opacity:1;color:#e2e8f0;color:rgba(226,232,240,var(--text-opacity))}.text-gray-400{--text-opacity:1;color:#cbd5e0;color:rgba(203,213,224,var(--text-opacity))}.text-gray-500{--text-opacity:1;color:#a0aec0;color:rgba(160,174,192,var(--text-opacity))}.text-gray-600{--text-opacity:1;color:#718096;color:rgba(113,128,150,var(--text-opacity))}.text-gray-700{--text-opacity:1;color:#4a5568;color:rgba(74,85,104,var(--text-opacity))}.text-gray-900{--text-opacity:1;color:#1a202c;color:rgba(26,32,44,var(--text-opacity))}.underline{text-decoration:underline}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.w-5{width:1.25rem}.w-8{width:2rem}.w-auto{width:auto}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}#media (min-width:640px){.sm\:rounded-lg{border-radius:.5rem}.sm\:block{display:block}.sm\:items-center{align-items:center}.sm\:justify-start{justify-content:flex-start}.sm\:justify-between{justify-content:space-between}.sm\:h-20{height:5rem}.sm\:ml-0{margin-left:0}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:pt-0{padding-top:0}.sm\:text-left{text-align:left}.sm\:text-right{text-align:right}}#media (min-width:768px){.md\:border-t-0{border-top-width:0}.md\:border-l{border-left-width:1px}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}#media (min-width:1024px){.lg\:px-8{padding-left:2rem;padding-right:2rem}}#media (prefers-color-scheme:dark){.dark\:bg-gray-800{--bg-opacity:1;background-color:#2d3748;background-color:rgba(45,55,72,var(--bg-opacity))}.dark\:bg-gray-900{--bg-opacity:1;background-color:#1a202c;background-color:rgba(26,32,44,var(--bg-opacity))}.dark\:border-gray-700{--border-opacity:1;border-color:#4a5568;border-color:rgba(74,85,104,var(--border-opacity))}.dark\:text-white{--text-opacity:1;color:#fff;color:rgba(255,255,255,var(--text-opacity))}.dark\:text-gray-400{--text-opacity:1;color:#cbd5e0;color:rgba(203,213,224,var(--text-opacity))}.dark\:text-gray-500{--tw-text-opacity:1;color:#6b7280;color:rgba(107,114,128,var(--tw-text-opacity))}}
</style>
<style>
body {
font-family: 'Nunito', sans-serif;
}
</style>
</head>
<body class="antialiased">
<div id="app">
#{{ message }}
</div>
<script>
var test = new Vue({
el: '#app',
data: {
message: 'hi'
}
});
</script>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="/"><img class="rounded-3" src="{{ url('omnisection(new).png') }}" style="width:172px;height:108px" /></a>
<button class="navbar-toggler brotoggle" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
#foreach($pages as $page)
<li class="nav-item">
<a href="{{ url($page['url']) }}">
<button class="btn btn-lg btn-outline-secondary brobutton" type="button">{{ $page['page_name'] }}</button>
</a>
</li>
#endforeach
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search Requests" aria-label="Search">
<a href="{{ url('search') }}">
<button class="btn btn-outline-secondary brobutton" type="submit">Search</button>
</a>
</form>
</div>
</div>
</nav>
<div class="relative flex items-top justify-center bg-gray-100 dark:bg-gray-900 sm:items-center sm:pt-0">
#if (Route::has('login'))
<div class="hidden fixed top-0 right-0 px-6 py-4 sm:block">
#auth
Dashboard
#else
Log in
#if (Route::has('register'))
Register
#endif
#endauth
</div>
#endif
</div>
<!-- Fluid container -->
<div class="container-fluid mt-1">
<div class="row">
<div class="col fs-1 text-center">
Your Data
</div>
<div class="col fs-1 text-center border-start">
Other's Data
</div>
</div>
<div class="row">
<div class="col">
#guest
<a href="{{ url('login') }}">
<button type="button" class="btn rounded btn-primary btn-lg start-50 translate-middle-x position-relative" alt="login button">Log in</button>
</a>
#endguest
</div>
<div class="col fs-1 border-start text-center">
#guest
?
#endguest
</div>
</div>
<div class="row">
<div class="col">
#auth
<div class="input-group mb-3">
<input type="file" class="form-control mt-2" id="inputGroupFile02" data-bs-toggle="tooltip" data-bs-placement="top" title="Use this to upload a file">
<label class="input-group-text mt-2" for="inputGroupFile02">Upload</label>
</div>
#endauth
</div>
<div class="col border-end" id="rcrdplayer">
#auth
<button v-on:click="startrecord" type="button" class="rounded-circle button-rec btn-lg btn-secondary" id="btn-start-recording" alt="record audio button" data-bs-toggle="tooltip" data-bs-placement="top" title="Use this button to record audio">Rec</button>
<img src="video.svg" class="img-fluid custom-img-bg rounded" id="btn-start-recording" alt="record video button" height="75" width="75" data-bs-toggle="tooltip" data-bs-placement="top" title="Use this button to record video"/>
#endauth
</div>
<div class="col">
</div>
<div class="col">
</div>
</div>
<!-- Recorder -->
#auth
<div class="row">
<div class="col">
<select class="form-select form-select-sm media-resolutions">
<option value="default">Default resolutions</option>
<option value="1920x1080">1080p</option>
<option value="1280x720">720p</option>
<option value="640x480">480p</option>
<option value="3840x2160">4K Ultra HD (3840x2160)</option>
</select>
<select class="form-select form-select-sm media-framerates" aria-label=".form-select-sm example">
<option value="default">Default framerates</option>
<option value="5">5 fps</option>
<option value="15">15 fps</option>
<option value="24">24 fps</option>
<option value="30">30 fps</option>
<option value="60">60 fps</option>
</select>
<select class="form-select form-select-sm media-bitrates" aria-label=".form-select-sm example">
<option value="default">Default bitrates</option>
<option value="8000000000">1 GB bps</option>
<option value="800000000">100 MB bps</option>
<option value="8000000">1 MB bps</option>
<option value="800000">100 KB bps</option>
<option value="8000">1 KB bps</option>
<option value="800">100 Bytes bps</option>
</select>
</div>
<div class="col border-end">
</div>
</div>
#endauth
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
Here is the Webpack code:
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel applications. By default, we are compiling the CSS
| file for the application as well as bundling up all the JS files.
|
*/
module.exports = {
mode: 'development'
}
mix.sass('resources/css/custom.scss','public/sass/custom.scss');
mix.js('node_modules/recordrtc/RecordRTC.js', 'public/js/RecordRTC.js');
mix.js('resources/js/customrecrtc.js', 'public/js/customrecrtc.js');
mix.js('resources/js/app.js', 'public/js').postCss('resources/css/app.css', 'public/css', [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
]);
I've read and re-read the docs on the installation, then I found that I was in version 2.x, so I switched to version 3.x. All this to no avail. It works if I use the CDN method, and I am then able to run some vue code in the blade template. I really just wanted to have all my node modules linked to the page through NPM, otherwise I would just use the CDN method.
Update: I have added the Webpack and Blade code. Since I installed Vue 3 using
npm install vue#next
I can't find where to add Vue from my node modules. This is a new laravel project, using Laravel 8.x
https://laravel.com/docs/8.x/mix#working-with-scripts
As it says in the above link, since I'm using Webpack which compiles JS code. I found that I must import the specific node module. If you have programmed before, think of it as importing or including a file in Java, C++, Python, or what have you.
In my case I needed to realize that I not only had to import one module, but many. And then specifically use the same file I imported into to type the relevant code. I still can't type the JS into the .blade.php file, but this should work well enough.
This an example of my custom.js
import node_module1
import node module2
// code goes here
I want to include this Summernote rich text editor in Laravel Jetstream Livewire Alpine.
I tried to extend the possibility to include additional Javascript and CSS by using the #stack() directive, right in the layouts/app.blade.php file:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght#400;600;700&display=swap">
<!-- Styles -->
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
#stack('css')
#livewireStyles
<!-- Scripts -->
<script src="{{ mix('js/app.js') }}" defer></script>
</head>
<body class="font-sans antialiased">
<x-jet-banner />
<div class="min-h-screen bg-gray-100">
#livewire('navigation-menu')
<!-- Page Heading -->
#if (isset($header))
<header class="bg-white shadow">
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
{{ $header }}
</div>
</header>
#endif
<!-- Page Content -->
<main>
{{ $slot }}
</main>
</div>
#stack('modals')
#stack('js')
#livewireScripts
</body>
</html>
Inside my blade view I included the summernote js and css CDN links as follows:
<x-app-layout>
<x-slot name="header">
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
{{ __('Dashboard') }}
</h2>
</x-slot>
<div class="py-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
<form action="{{ route('post') }}" method="post">
#csrf
<label class="block text-gray-700 text-sm font-bold mb-2" for="fuente">
Your text
</label>
<div id="summernote">
<textarea name="fuente" id="fuente" class="w-full px-3 py-2 text-gray-700 border rounded-lg focus:outline-none" rows="4"></textarea>
</div>
<button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 mt-6 border border-blue-700 rounded">
Send
</button>
</form>
</div>
</div>
</div>
</x-app-layout>
#push('css')
<link href="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote-lite.min.css" rel="stylesheet">
#endpush
#push('js')
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote-lite.min.js"></script>
<script>
$('#summernote').summernote({
placeholder: 'Hello stand alone ui',
tabsize: 2,
height: 120,
toolbar: [
['style', ['style']],
['font', ['bold', 'underline', 'clear']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['table', ['table']],
['insert', ['link', 'picture', 'video']],
['view', ['fullscreen', 'codeview', 'help']]
]
});
</script>
#endpush
However, the editor is not loading. If I load the source code of the blade view, I don't see the Summernote javascript.
What am I missing? How do I make it work?
My bad.
I've realized I have to include the #stack() directives inside the <x-app-layout> tag. For example, just before the end of the </x-app-layout>.
<x-app-layout>
<x-slot name="header">
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
{{ __('Dashboard') }}
</h2>
</x-slot>
<div class="py-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
<form action="{{ route('post') }}" method="post">
#csrf
<label class="block text-gray-700 text-sm font-bold mb-2" for="fuente">
Your text
</label>
<div id="summernote">
<textarea name="fuente" id="fuente" class="w-full px-3 py-2 text-gray-700 border rounded-lg focus:outline-none" rows="4"></textarea>
</div>
<button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 mt-6 border border-blue-700 rounded">
Send
</button>
</form>
</div>
</div>
</div>
#push('css')
<link href="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote-lite.min.css" rel="stylesheet">
#endpush
#push('js')
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote-lite.min.js"></script>
<script>
$('#summernote').summernote({
placeholder: 'Hello stand alone ui',
tabsize: 2,
height: 120,
toolbar: [
['style', ['style']],
['font', ['bold', 'underline', 'clear']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['table', ['table']],
['insert', ['link', 'picture', 'video']],
['view', ['fullscreen', 'codeview', 'help']]
]
});
</script>
#endpush
</x-app-layout>
And finally, that fixed it.
RESOLVED!
I just needed to access "links.test/submit" instead of simply "links.test", as "submit.blade.php" was a new page.
I also learned the tutorial uses an older version of Laravel, meaning "resources/views/layouts/app.blade.php" was not created because the
php artisan make:auth
command did not work. For Laravel 7, as Gustavo Alves pointed out, I needed to use these two commands instead:
composer require laravel/ui
php artisan ui vue --auth
ORIGINAL QUESTION:
I am going through a Laravel tutorial for beginners - https://laravel-news.com/your-first-laravel-application. I came to the "Displaying the Link Submission Form" section and pasted the provided code snippet into the routes/web.php file, then created submit.blade.php template at resources/views/submit.blade.php with the provided code snippet, as per instructions.
However, the submit form is NOT showing up in my "links.test".
web.php:
?php
use Illuminate\Support\Facades\Route;
Route::get('/', function () {
$links = \App\Link::all();
return view('welcome', ['links' => $links]);
});
Route::get('/submit', function () {
return view('submit');
});
submit.blade.php:
#extends('layouts.app')
#section('content')
<div class="container">
<div>
<h1>Submit a Link </h1>
<form action="/submit" method="post" >
#if ($errors->any())
<div class="alert alert-danger" role="alert">
Plese fix the following errors
</div>
#endif
{!!csrf_field()!!}
<div class="form-group{{ $errors->has('title') ? 'has-error' : ''}}">
<label for="title">Title</label>
<input type="text" class="form-control" id="title" name="title" placeholder="Title" value="{{ old('title') }}">
#if($errors->has('title'))
<div class="alert alert-danger">
{{ $errors->first('title') }}
</div>
#endif
</div>
<div class="form-group{{ $errors->has('url') ? ' has-error' : '' }}">
<label for="url">Url</label>
<input type="text" class="form-control" id="url" name="url" placeholder="URL" value="{{ old('url') }}">
#if($errors->has('url'))
<span>
<div class="alert alert-danger">
{{ $errors->first('url') }}
</div>
</span>
#endif
</div>
<div class="form-group{{ $errors->has('description') ? ' has-error' : '' }}">
<label for="description">Description</label>
<textarea class="form-control" id="description" name="description" placeholder="description">{{ old('description') }}</textarea>
#if($errors->has('description'))
<div class="alert alert-danger">
{{ $errors->first('description') }}
</div>
#endif
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
#endsection
So, what I can gather for your comment is
you need to create resources\views\layouts\app.blade.php where you will have something like this
<!DOCTYPE html>
<html lang="en">
<head>
<title>Your App</title>
#section('head')
<!-- Styles -->
<link href="{{ mix('css/app.css') }}" rel="stylesheet">
#show()
</head>
<body>
#yield('content')
#section('scripts')
<script src="{{ mix('/js/app.js') }}"></script>
#show
#endsection
</body>
</html>
Once you got this you should be able to extend and this should work as well.
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
https://imgur.com/inOTzgv
and here's what it looks like when I'm log-in
https://imgur.com/Qgq52d4
Here's my app.js
require('./bootstrap');
window.Vue = require('vue');
import Buefy from 'buefy';
Vue.use(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()) }}">
<head>
<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('app.name', 'EthicallySpeaking') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">-->
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
#yield('styles')
</head>
<body>
<div id="app">
#include('inc.navbar')
#include('inc.messages')
#include('inc.side_navbar_cpanel')
<div id="app" class="cpanel-dashboard-area flex-container">
#yield('content')
</div>
</div>
#yield('scripts')
</body>
</html>
and here's the edit.php form that I'm having the issue with...
#extends('layouts.cpanel')
#section('content')
<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 -->
<hr/>
<div class="columns">
<div class="column">
<form action="{{route('users.update', $user->id)}}" method="POST">
{{method_field ('PUT')}}
{{csrf_field()}}
<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}}">
</p>
</div>
<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}}">
</p>
</div>
<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>
<div class="field">
<b-radio v-model="password_options" native-value="auto" name="permission_type">Auto-Generate New Password</b-radio>
</div>
<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">
</p>
</div>
</div>
<button class="button is-success m-t-20">Edit User</button>
</form>
</div><!-- end column is-10 -->
</div><!-- end columns -->
</div><!-- end container -->
</section>
#endsection
I wanted to know if anyone know why this is happing?
m new to vue and after installing it in Laravel, I make a new component but its not showing in browser,and the browser gives warning in developers tools, in developers tools > console it shows:
app.js:37960 [Vue warn]: Failed to mount component:
template or render function not defined.
found in
---> <TaskForm>
<Root>
warn # app.js:37960
app.js:46384 You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html
is there any problem in code or if any solution to resolve this issue?
component:
<template>
<div class="col-md-8">
<div class="card card-default">
<div class="card-header">Task Form</div>
<div class="card-body">
<form action="./api/task" method="POST">
<div class="form-group">
<input type="text" name="title" placeholder="Task title" class="form-control">
</div>
<div class="form-group">
<input type="submit" value="Add Task" class="btn btn-info">
</div>
</form>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
app.js:
require('./bootstrap');
window.Vue = require('vue');
Vue.component('example-component',
require('./components/ExampleComponent.vue').default);
Vue.component("task-form", require('./components/TaskForm.vue'));
const app = new Vue({
el: '#app'
});
this is app.blade.php: app.blade.php:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<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('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet" type="text/css">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<nav class="navbar navbar-expand-md navbar-light navbar-laravel">
<div class="container">
<a class="navbar-brand" href="{{ url('/') }}">
{{ config('app.name', 'Laravel') }}
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Left Side Of Navbar -->
<ul class="navbar-nav mr-auto">
</ul>
<!-- Right Side Of Navbar -->
<ul class="navbar-nav ml-auto">
<!-- Authentication Links -->
#guest
<li class="nav-item">
<a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
</li>
#if (Route::has('register'))
<li class="nav-item">
<a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
</li>
#endif
#else
<li class="nav-item dropdown">
<a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
{{ __('Logout') }}
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
#csrf
</form>
</div>
</li>
#endguest
</ul>
</div>
</div>
</nav>
<main class="py-4">
#yield('content')
</main>
</div>
</body>
</html>