integration of mdb5 with laravel 8

  1. MDB Home Page
  2. Support Main Page
  3. MDB Standard
Topic: integration of mdb5 with laravel 8

sody pro premium priority asked 3 years ago

Expected behavior I purchased mdb5-pro-advanced load mdb-ui-kit/src/mdb/js/mdb.pro.js within app.js as require('mdb-ui-kit/src/mdb/js/mdb.pro.js'); withing my bootstrap.js file

and load mdb-ui-kit/src/scss/mdb.pro.scss within app.scss as @import '~mdb-ui-kit/src/scss/mdb.pro.scss'; also I need to specify RTL which i didn't find .rtl file preferably integrate with existing jquery and livewire (for existing projects and new ones)

Actual behavior so far the loading of the js file drops errors and the css compalins about deprecated use of dividers aparently even lost rtl support and js failes to load

after fixing this part i will move to test jquery (my exisiting projects already use it). I already know (from vanilla bootstrap i will have to modify my modals loading as its not supported with jquery). after that step I will move to test livewire (new project).

help appreciated to start using mdb proffesionally.

I tend to use from src since it give me flexibility to modify/adjust if needed with bugs arise. all my projects use RTL so I need that to work without problems also.

another question do I need to load bootstrap-icons manually as a package ? aka npm i bootstrap-icons --save or its included somehow ?

Sami

Resources (screenshots, code snippets etc.) got these errors for js: ERROR in ./node_modules/mdb-ui-kit/src/mdb/js/pro/charts.js 2:0-56 Module not found: Error: Can't resolve 'chartjs-plugin-datalabels' in 'C:\laravel\iapp\node_modules\mdb-ui-kit\src\mdb\js\pro'

ERROR in ./node_modules/mdb-ui-kit/src/mdb/js/pro/perfect-scrollbar.js 2:0-49 Module not found: Error: Can't resolve 'perfect-scrollbar' in 'C:\laravel\iapp\node_modules\mdb-ui-kit\src\mdb\js\pro' Did you mean './perfect-scrollbar'? Requests that should resolve in the current directory need to start with './'. Requests that start with a name are treated as module requests and resolve within module directories (node_modules). If changing the source code is not an option there is also a resolve options called 'preferRelative' which tries to resolve these kind of requests in the current directory too.

ERROR in ./node_modules/mdb-ui-kit/src/mdb/js/pro/sidenav.js 1:0-49 Module not found: Error: Can't resolve 'perfect-scrollbar' in 'C:\laravel\iapp\node_modules\mdb-ui-kit\src\mdb\js\pro' Did you mean './perfect-scrollbar'? Requests that should resolve in the current directory need to start with './'. Requests that start with a name are treated as module requests and resolve within module directories (node_modules). If changing the source code is not an option there is also a resolve options called 'preferRelative' which tries to resolve these kind of requests in the current directory too.

and these warnings for scss: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($spacer, 4)

More info and automated migrator: https://sass-lang.com/d/slash-div

╷

253 │ 1: $spacer / 4, │ ^^^^^^^^^^^ ╵ node_modules\mdb-ui-kit\src\mdb\scss\bootstrap-rtl-fix_variables.scss 253:6 @import node_modules\mdb-ui-kit\src\mdb\scss\mdb.free.scss 8:9 @import node_modules\mdb-ui-kit\src\mdb\scss\mdb.pro.scss 2:9 @import resources\sass\app.scss 17:9 root stylesheet

: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($spacer, 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

╷

254 │ 2: $spacer / 2, │ ^^^^^^^^^^^ ╵ node_modules\mdb-ui-kit\src\mdb\scss\bootstrap-rtl-fix_variables.scss 254:6 @import node_modules\mdb-ui-kit\src\mdb\scss\mdb.free.scss 8:9 @import node_modules\mdb-ui-kit\src\mdb\scss\mdb.pro.scss 2:9 @import resources\sass\app.scss 17:9 root stylesheet

: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($grid-gutter-width, 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

╷

349 │ $container-padding-x: $grid-gutter-width / 2 !default; │ ^^^^^^^^^^^^^^^^^^^^^^ ╵ node_modules\mdb-ui-kit\src\mdb\scss\bootstrap-rtl-fix_variables.scss 349:23 @import node_modules\mdb-ui-kit\src\mdb\scss\mdb.free.scss 8:9 @import node_modules\mdb-ui-kit\src\mdb\scss\mdb.pro.scss 2:9 @import resources\sass\app.scss 17:9 root stylesheet

: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($spacer, 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

╷

462 │ $headings-margin-bottom: $spacer / 2 !default; │ ^^^^^^^^^^^ ╵ node_modules\mdb-ui-kit\src\mdb\scss\bootstrap-rtl-fix_variables.scss 462:26 @import node_modules\mdb-ui-kit\src\mdb\scss\mdb.free.scss 8:9 @import node_modules\mdb-ui-kit\src\mdb\scss\mdb.pro.scss 2:9 @import resources\sass\app.scss 17:9 root stylesheet

: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($input-padding-y, 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

╷

715 │ $input-height-inner-quarter: add($input-line-height * 0.25em, $input-padding-y / 2) !default;
│ ^^^^^^^^^^^^^^^^^^^^ ╵

× Mix Compiled with some errors in 7.01s

: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($spacer, 4)

More info and automated migrator: https://sass-lang.com/d/slash-div

╷

253 │ 1: $spacer / 4, │ ^^^^^^^^^^^ ╵ node_modules\mdb-ui-kit\src\mdb\scss\bootstrap-rtl-fix_variables.scss 253:6 @import node_modules\mdb-ui-kit\src\mdb\scss\mdb.free.scss 8:9 @import node_modules\mdb-ui-kit\src\mdb\scss\mdb.pro.scss 2:9 @import resources\sass\app.scss 17:9 root stylesheet

: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($spacer, 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

╷

254 │ 2: $spacer / 2, │ ^^^^^^^^^^^ ╵ node_modules\mdb-ui-kit\src\mdb\scss\bootstrap-rtl-fix_variables.scss 254:6 @import node_modules\mdb-ui-kit\src\mdb\scss\mdb.free.scss 8:9 @import node_modules\mdb-ui-kit\src\mdb\scss\mdb.pro.scss 2:9 @import resources\sass\app.scss 17:9 root stylesheet

: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($grid-gutter-width, 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

╷

349 │ $container-padding-x: $grid-gutter-width / 2 !default; │ ^^^^^^^^^^^^^^^^^^^^^^ ╵ node_modules\mdb-ui-kit\src\mdb\scss\bootstrap-rtl-fix_variables.scss 349:23 @import node_modules\mdb-ui-kit\src\mdb\scss\mdb.free.scss 8:9 @import node_modules\mdb-ui-kit\src\mdb\scss\mdb.pro.scss 2:9 @import resources\sass\app.scss 17:9 root stylesheet

: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($spacer, 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

╷

462 │ $headings-margin-bottom: $spacer / 2 !default; │ ^^^^^^^^^^^ ╵ node_modules\mdb-ui-kit\src\mdb\scss\bootstrap-rtl-fix_variables.scss 462:26 @import node_modules\mdb-ui-kit\src\mdb\scss\mdb.free.scss 8:9 @import node_modules\mdb-ui-kit\src\mdb\scss\mdb.pro.scss 2:9 @import resources\sass\app.scss 17:9 root stylesheet

: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($input-padding-y, 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

╷

715 │ $input-height-inner-quarter: add($input-line-height * 0.25em, $input-padding-y / 2) !default;
│ ^^^^^^^^^^^^^^^^^^^^ ╵ node_modules\mdb-ui-kit\src\mdb\scss\bootstrap-rtl-fix_variables.scss 715:63 @import node_modules\mdb-ui-kit\src\mdb\scss\mdb.free.scss 8:9 @import node_modules\mdb-ui-kit\src\mdb\scss\mdb.pro.scss 2:9 @import resources\sass\app.scss 17:9 root stylesheet

: 72 repetitive deprecation warnings omitted.

Child mini-css-extract-plugin C:\laravel\iapp\node_modules\css-loader\dist\cjs.js??ruleSet[1].rules[5].use[1]!C:\laravel\iapp\node_modules\postcss-loader\dist\cjs.js??ruleSet[1].rules[5].use[2]!C:\laravel\iapp\node_modules\resolve-url-loader\index.js??ruleSet[1].rules[5].use[3]!C:\laravel\iapp\node_modules\sass-loader\dist\cjs.js??ruleSet[1].rules[5].use[4]!C:\laravel\iapp\resources\sass\app.scss compiled successfully

Grzegorz Bujański staff answered 3 years ago

As I understand you are trying to integrate MDB yourself? The advanced package includes Laravel's integration with MDB. Try to use it or check how we integrated it and do it in the same way.

sody pro premium priority commented 3 years ago

hi, I checked your integration. basicly you just put all the minified version on public folder. what i tried to do is load it from source and compile with laravel mix (webpack). i searched the whole component there is no details how to create the rtl version. even without rtl the js compilation fails as I explained above, seems you included modules / files not included in the package it self. i did manage to compile the plugins (not the main mdb package that fails), the scss also compiled with warning, any plans to move to bootstrap 5.0.2? @UNNdev mentioned it solves the warnings.

so to sum up: 1. I need help compile the src js without errors. 2. need help to get the rtl version from src. 3. do you know of any problems using jquery ? what i need to py attention for? 4. is the icons included in the package or i need to load them seperatly?

Sami

UNNdev pro premium priority answered 3 years ago

The SCSS warnings are largely caused by Bootstrap and the majority if not all will disappear as soon as MDB will update Bootstrap to 5.0.2. Of course, they also have to fix MDB-specific code if they use /.

As for the JS errors, no clue, sorry.

sody pro premium priority commented 3 years ago

thanks for the explanation.

sody pro premium priority commented 3 years ago

i solved the js errors:

src/mdb/js/pro/sidenav.js first line was: import PerfectScrollbar from 'perfect-scrollbar'; replaced with

import PerfectScrollbar from '../mdb/perfect-scrollbar';

src/mdb/js/pro/charts.js first line was: the lines: import { Chart as Chartjs } from 'chart.js'; import ChartDataLabels from 'chartjs-plugin-datalabels';

needed installing chart.js & charts-plugin-datalabels via npm

src/mdb/js/pro/perfect-scrolbar.js replaced the line import PerfectScrollbar from 'perfect-scrollbar'; with import PerfectScrollbar from '../mdb/perfect-scrollbar';

as for the css it'll have to wait to mdb to update to bootstrap 5.0.2 as you suggested.

still didn't figure out how to compile the css with RTL support.

Sami

Grzegorz Bujański staff answered 3 years ago

  1. Unfortunately, we do not have a prepared version of the MDB integration with Laravel with the possibility of compiling MDB src file. But we have a prepared webpack configuration for MDB: https://github.com/mdbootstrap/mdb-webpack-starter. Maybe this will help you create the right setup for Laravel mix.
  2. Here you will find information about RTL: https://mdbootstrap.com/docs/standard/getting-started/rtl/. The change only applies to styles, and our styles are designed in such a way that no additional changes are required. To build styles, it is only necessary to use the appropriate plugin in the webpack: https://www.npmjs.com/package/rtl-css-transform-webpack-plugin. Unfortunately, we do not provide webpack configuration for RTL at the moment
  3. We have not encountered a problem with using jQuery at the moment. If such occurs, we will try to fix it.
  4. Icons must be added separately. We are using Font Awesome.

sody pro premium priority commented 3 years ago

Hi, thanks for you suggestions. I solved the js errors - see bellow, maybe need to update the src files in the repo.

I still didn't manage to get the RTL support via webpack.

as for the css errors, do you plan to update to bootstrap 5.0.2 ? when?

Sami

solving the js errors:

src/mdb/js/pro/sidenav.js first line was: import PerfectScrollbar from 'perfect-scrollbar'; replaced with

import PerfectScrollbar from '../mdb/perfect-scrollbar'; src/mdb/js/pro/charts.js first line was: the lines: import { Chart as Chartjs } from 'chart.js'; import ChartDataLabels from 'chartjs-plugin-datalabels';

needed installing chart.js & charts-plugin-datalabels via npm src/mdb/js/pro/perfect-scrolbar.js replaced the line import PerfectScrollbar from 'perfect-scrollbar'; with import PerfectScrollbar from '../mdb/perfect-scrollbar';

as for the css it'll have to wait to mdb to update to bootstrap 5.0.2 as you suggested.

still didn't figure out how to compile the css with RTL support.

Sami

sody pro premium priority commented 3 years ago

for future documentation i did manage to get rtl to work. i installed rtlcss via npm (npm install rtlcss --dev) and in webpack config i did the following: .sass('resources/sass/app.scss', 'public/css') .postCss('public/css/app.css','public/css/app.rtl.css', [require('rtlcss')])

in app.scss i did: @import '~mdb-ui-kit/src/mdb/scss/mdb.pro.scss';

I still have the sass complains (warning) about usage of divider "/", eg: 462 │ $headings-margin-bottom: $spacer / 2 !default; │ ^^^^^^^^^^^ ╵ node_modules\mdb-ui-kit\src\mdb\scss\bootstrap-rtl-fix_variables.scss 462:26 @import node_modules\mdb-ui-kit\src\mdb\scss\mdb.free.scss 8:9 @import node_modules\mdb-ui-kit\src\mdb\scss\mdb.pro.scss 2:9 @import resources\sass\app.scss 18:9 root stylesheet

: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($input-padding-y, 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

Sami

Dawid Wajszczuk staff commented 3 years ago

Hi. We are planning to update bootstrap to 5.0.2 in next releases. We will try to get rid of the scss errors that we have encountered, as well. Keep coding, Dawid

softcon pro premium answered 3 years ago

I don't know if this helps anybody, but for my laravel application I just import the bootstrap stylesheets via oldschool html in a header file (head.blade.php):

<!-- import MDB Pro -->
<link rel="stylesheet" href="/css/mdb.3.9/mdb.min.css" />
<!-- import Material Icons from Google Fonts -->
<link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">

...and import the mdb js files using a footer file (foot.blade.php):

<!-- import the MDB javascript file https://mdbootstrap.com/ -->    
<script
    type="text/javascript"
    src="{{ asset('js/mdb_3.9/mdb.min.js') }}">
</script>

<!-- Font Awesome -->
<link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
rel="stylesheet">

...and place all the mdb files in the public folder. Never had any errors doing it this way.

Write
Create snippet
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: Pro
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 3.9.0
  • Device: desktop
  • Browser: chrome
  • OS: windows10
  • Provided sample code: No
  • Provided link: Yes
Tags
laravel-integration jquery livewire
Related topics
2
DataTables and ajax
2
Integration issue with Webpack-encore symfony 4
2
MDBootstrap is no longer compatible with Webpack and TypeScript
1
Does the chat plugin come with MDB pro jQuery? If so, I did not get files to download
1
Date-time picker change format
About author
sody
Pro User Premium support
59Support score
13Questions 4Answers
0Snippets likes 6Snippets