How to integrate MDB with Laravel Tutorial

Topic: How to integrate MDB with Laravel Tutorial

jkryszto free asked 6 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

@import '~@jkryszto/mdb-for-laravel/scss/mdb';

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

Add comment

calvarez pro answered 4 years ago

0 0 Best answer

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

Add comment

arumcomputer free answered 5 years ago

0 0 Best answer

Please insert min. 20 characters.

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

Please insert min. 15 characters.

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 5 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 5 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/

Add comment

PetarZr free answered 5 years ago

0 0 Best answer

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

Add comment

Med El free answered 5 years ago

0 0 Best answer

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/

Add comment

chainolg pro answered 5 years ago

0 0 Best answer

@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.

Add comment

Tenarius free answered 5 years ago

0 0 Best answer

<h2>How to integrate mdb manually into laravel environment:</h2>

1: Install npm

<pre class="prettyprint"><code>npm install
</code></pre>

2: create manually a new folder (f.e.: mdbpro) in the node_modules dictionary

<pre class="prettyprint"><code>node_modules/mdbpro
</code></pre>

3: copy your complete mdb-files and folders in this new dictionary

4: go to the resources/js/bootstrap.js replace:

<pre class="prettyprint"><code>try {
 window.Popper = require('popper.js').default;
 window.$ = window.jQuery = require('jquery');

require('bootstrap');
} catch (e) {}
</code></pre>

with

<pre class="prettyprint"><code>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) {}
</code></pre>

5: go to the resources/sass/app.scss and replace:

<pre class="prettyprint"><code>// Variables
@import 'variables';

// Bootstrap
@import '~bootstrap/scss/bootstrap';
</code></pre>

with

<pre class="prettyprint"><code>// 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';
</code></pre>

6: go to your blade-template (f.e.: welcome.blade.php) and add to the head:

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

<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</code></pre>

7: run npm dev or prod

<pre class="prettyprint"><code>npm run dev //to see full js and css code
OR
npm run prod //for minimize js and css code
</code></pre>

<hr>

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

Please insert min. 20 characters.

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

Add comment

Poco Raymundo free answered 5 years ago

0 0 Best answer

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

Add comment

Poco Raymundo free answered 5 years ago

0 0 Best answer

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

Add comment

digitalmanagerguru free answered 5 years ago