Topic: How to integrate MDB with Laravel Tutorial
jkryszto free asked 6 years ago
npm i @jkryszto/mdb-for-laravelNext in resources\sass\app.scss add
calvarez pro answered 4 years ago
Hello,
Can you please grant me access to your git ??? Thanks !
Mateusz Leciejewski staff commented 4 years ago
Hello,
You should receive an email with an activation link (please check your spam folder as well). Click on the activation link, so you will be redirected to set your new password.
Best, Mateusz
arumcomputer free answered 5 years ago
i am not getting this to work with the pro version I just bought. I tested with form labels, range input and notifications. It is all well styled, but it seems that the js does not work. for example I get the following error when clicking notification button copied from docs: ReferenceError: Can't find variable: toastr
The form label does not animate, when I start to type and the range input does not show the current input when sliding.
I guess it is all because of the js. Is there a solution to get MDB Pro working with Laravel 6?
Arkadiusz Cacko staff commented 5 years ago
Hi @arumcomputer, I've just tested MDB Pro 4.10.0 (jquery version) with laravel 6.0.4
and looks like everything works fine for me. So the easiest way to integrate mdb with laravel is put required files to public folder (in your project directory) and add provided code in blade:
<link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}" />
<link rel="stylesheet" href="{{ asset('css/mdb.min.css') }}" />
(...)
<script src="{{ asset('js/jquery.min.js') }}"></script>
<script src="{{ asset('js/bootstrap.min.js') }}"></script>
<script src="{{ asset('js/mdb.min.js') }}"></script>
Please try this way and tell me if something changed or still not working.
Regards Arek
arumcomputer free commented 5 years ago
Thanks, it is working better as before when requiring the scripts. Now I get the following error whith input type range: TypeError: jQuery.easing[jQuery.easing.def] is not a function. (In 'jQuery.easingjQuery.easing.def', 'jQuery.easing[jQuery.easing.def]' is undefined) Notifications and the form label is working !
Grzegorz Bujański staff commented 5 years ago
I will check it, and back when I have something
arumcomputer free commented 4 years ago
Is there any way to include the newest MDB Version into Laravel 6 via npm install and using Webpack to compile JS and CSS?
Please, a full documentation would be very helpful.
Grzegorz Bujański staff commented 4 years ago
Hi. At this moment we working on that. You can follow this post for more info: https://mdbootstrap.com/support/jquery/issue-with-4-9-0-webpack-typescript/
PetarZr free answered 5 years ago
Hello, can I have access to your git? Thank you
Bartłomiej Malanowski staff commented 5 years ago
Sure, just contact me directly at b.malanowski@mdbootstrap.com and send me your order ID
PetarZr free commented 5 years ago
E-mail send, can you please provide access. Thank you
Med El free answered 5 years ago
How to do it in case I want MDB-Vue ?
Bartłomiej Malanowski staff commented 5 years ago
I recommend you to check this guide: https://mdbootstrap.com/articles/vue/mdb-vue-laravel-quick-start-guide/
chainolg pro answered 5 years ago
@mdb_staff is it possible to provide me git access? My order ID is #47942.
Tenarius free commented 5 years ago
Try this: 1: go to https://git.mdbootstrap.com/users/sign_in 2: request a new password 3: look into your spam folder ;-) 4: enjoy!
Marta Wierzbicka staff commented 5 years ago
Thank you @Tenarius for your help.
Tenarius free answered 5 years ago
How to integrate mdb manually into laravel environment:
1: Install npm
npm install
2: create manually a new folder (f.e.: mdbpro) in the node_modules dictionary
node_modules/mdbpro
3: copy your complete mdb-files and folders in this new dictionary
4: go to the resources/js/bootstrap.js replace:
try {
window.Popper = require('popper.js').default;
window.$ = window.jQuery = require('jquery');
require('bootstrap');
} catch (e) {}
with
try {
window.Popper = require('popper.js').default;
window.$ = window.jQuery = require('jquery');
require('bootstrap');
require('./../../node_modules/mdbpro/js/bootstrap.js');
require('./../../node_modules/mdbpro/js/mdb.js');
} catch (e) {}
5: go to the resources/sass/app.scss and replace:
// Variables
@import 'variables';
// Bootstrap
@import '~bootstrap/scss/bootstrap';
with
// Fontawesome
@import url('https://use.fontawesome.com/releases/v5.8.2/css/all.css');
// mdbootstrap pro
@import '~mdbpro/css/mdb.css';
@import '~mdbpro/css/bootstrap.css';
@import '~mdbpro/scss/mdb';
6: go to your blade-template (f.e.: welcome.blade.php) and add to the head:
<meta name="csrf-token" content="{{ csrf_token() }}">
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
7: run npm dev or prod
npm run dev //to see full js and css code
OR
npm run prod //for minimize js and css code
Fact: This procedure is not recommended, you should use npm to install mdb!
But if you haven´t access to the Material Design for Bootstrap PRO git repository, you have to find an other solution ;-)
I hope it helps someone.
Regards Tenarius
Mikołaj Smoleński staff commented 5 years ago
Thank You very much for your instruction!
Best regards
Leitner free commented 5 years ago
Hi,I also needed these lines in my app.js:
import bsCustomFileInput from 'mdbootstrap-pro/js/modules/vendor/bs-custom-file-input';
global.bsCustomFileInput = bsCustomFileInput;
Regards.
Mikołaj Smoleński staff commented 5 years ago
Thanks for reporting this info. Best regards
Gell free commented 5 years ago
This is great, worked beautifully. Thank you very much :)
jk63 free commented 5 years ago
I am not getting any js folder from the downloads. can you tell me where to get this. I am deploying this in laravel 6
Bartłomiej Malanowski staff commented 5 years ago
You can find the js folder in the package that you're downloading from the orders page
Poco Raymundo free answered 5 years ago
Hello. Can you give me access to your git? Thanks
Bartłomiej Malanowski staff commented 5 years ago
Yes, I can ;) Please contact me at b.malanowski@mdbootstrap.com from the e-mail that you used to purchase MDB Pro. You can also send me your order ID so I could confirm your payment
digitalmanagerguru free answered 5 years ago
Hi there,
@mdb_staff is it possible to provide me git access? It seems I don't have jquery folder access.
Thanks in advance!
Bartłomiej Malanowski staff commented 5 years ago
Sure thing! Now you should be ready to use it ;)
hugominari pro commented 4 years ago
Can u do that for me too @Bartłomiej Malanowski
Mateusz Leciejewski staff commented 4 years ago
@hugominari I've sent you an email with new credentials. Please check your email inbox
PrimoNurse free answered 5 years ago
Hi,
How to integrate the MDB PRO version to laravel 5.8?
Bartłomiej Malanowski staff commented 5 years ago
if you have access to our git repository, you can try to use this: https://git.mdbootstrap.com/mdb/jquery/jq-pro/blob/master/INSTALLATION.md
basn01de free commented 5 years ago
Hello,
how can I add mdb pro to the laravel webpack.mix file with css and all compoents?
I have added the git repo via npm before
many thanks in advance
Bartłomiej Malanowski staff commented 5 years ago
I think this answer on StackOverflow may help you: https://stackoverflow.com/questions/42442834/how-to-use-bootstrap-4-in-laravel-5-4
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: All
- Browser: All
- OS: All
- Provided sample code: Yes
- Provided link: Yes
Bartłomiej Malanowski staff commented 5 years ago
Thank you for sharing your solution with us!
PrimoNurse free commented 5 years ago
npm i @jkryszto/mdb-for-laravel will only configure the FREE files to laravel, how about the PRO version?
Bartłomiej Malanowski staff commented 5 years ago
@PrimoNurse you can use our jq-pro repository instad of @jkryszto. Here you can find it: https://git.mdbootstrap.com/mdb/jquery/jq-pro/blob/master/INSTALLATION.md