How to integrate MDB with Laravel Tutorial


Topic: How to integrate MDB with Laravel Tutorial

jkryszto asked 4 years ago

It's easier than you think! First use my npm package (github)
npm i @jkryszto/mdb-for-laravel
Next in resources\sass\app.scss add

Bartłomiej Malanowski staff pro premium commented 3 years ago

Thank you for sharing your solution with us!


PrimoNurse commented 3 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 pro premium commented 3 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


PrimoNurse answered 3 years ago

Hi,

How to integrate the MDB PRO version to laravel 5.8?


Bartłomiej Malanowski staff pro premium commented 3 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 commented 3 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 pro premium commented 3 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


digitalmanagerguru pro premium answered 3 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 pro premium commented 3 years ago

Sure thing! Now you should be ready to use it ;)


hugominari pro commented 2 years ago

Can u do that for me too @Bartłomiej Malanowski


Mateusz Leciejewski staff pro premium commented 2 years ago

@hugominari I've sent you an email with new credentials. Please check your email inbox


Hello. Can you give me access to your git? Thanks


Bartłomiej Malanowski staff pro premium commented 3 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


Hello. Can you give me access to your git? Thanks


Tenarius answered 3 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 3 years ago

Thank You very much for your instruction!

Best regards


Leitner commented 3 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 3 years ago

Thanks for reporting this info. Best regards


Gell commented 3 years ago

This is great, worked beautifully. Thank you very much :)


jk63 commented 3 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 pro premium commented 3 years ago

You can find the js folder in the package that you're downloading from the orders page


chainolg pro answered 3 years ago

@mdb_staff is it possible to provide me git access? My order ID is #47942.


Tenarius commented 3 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 Szymanska staff pro premium commented 3 years ago

Thank you @Tenarius for your help.


Med El answered 3 years ago

How to do it in case I want MDB-Vue ?


Bartłomiej Malanowski staff pro premium commented 3 years ago

I recommend you to check this guide: https://mdbootstrap.com/articles/vue/mdb-vue-laravel-quick-start-guide/


PetarZr pro premium answered 3 years ago

Hello, can I have access to your git? Thank you


Bartłomiej Malanowski staff pro premium commented 3 years ago

Sure, just contact me directly at b.malanowski@mdbootstrap.com and send me your order ID


PetarZr pro premium commented 3 years ago

E-mail send, can you please provide access. Thank you


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 pro premium priority commented 2 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 commented 2 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 2 years ago

I will check it, and back when I have something


arumcomputer commented 2 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 2 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/


calvarez pro answered 2 years ago

Hello,

Can you please grant me access to your git ??? Thanks !


Mateusz Leciejewski staff pro premium commented 2 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


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: All
  • Browser: All
  • OS: All
  • Provided sample code: Yes
  • Provided link: Yes