Introduction

This guide will walk you through steps necessary to include MDB package in your Laravel project and to add some basic setup for your project.


Prerequisites

Before starting the project make sure to install the following utilities:


Create project

Run following commands to initialize and open the project. If you need more details visit laravel-installation.

        
            
      composer create-project laravel/laravel my-project
      cd my-project
      npm --save-dev concurrently
      
        
    

Install MDB

Now when we have Laravel project initialized and MDB package installed, let's add MDB to the project.

Note: CDN works only with MDB Free version. If you are MDB Pro user, choose different installation method.

NPM

Prerequisites

Before starting project make sure to install Node LTS (12.x.x recommended).

Installation

To install MDB UI KIT in your project easily type the following command in terminal:

MDB Free
        
            
            npm install mdb-ui-kit
          
        
    
MDB Pro Essential users
        
            
            npm install git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/standard/mdb-ui-kit-pro-essential
          
        
    
MDB Pro Advanced users
        
            
            npm install git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/standard/mdb-ui-kit-pro-advanced
          
        
    

Now when we have Laravel project initialized and MDB package installed, let's move on to setting up the project.


Import MDB

Create mdb.scss in my-project/resources/css and mdb.js in my-project/resources/js. Then import MDB in those files:

CSS

        
            
          // import styles
          @import 'mdb-ui-kit/css/mdb.min.css';;
        
        
    

JS

        
            
            // import js
            import * as mdb from "mdb-ui-kit/js/mdb.min.js";

            window.mdb = mdb.default;
          
        
    

Now your directory should look like this:

        
          my-project/
          ├── resources/
          │   ├── css/
          │   │   ├── app.css 
          │   │   └── mdb.scss
          │   ├── js/
          │   │    ├── bootstrap.js
          │   │    ├── app.js 
          │   │    └── mdb.js
          │   └── views/
          │       └── welcome.blade.php
        (...)
        
      

Step 1

Download the package

Step 2

Create MDB folder in following directory my-project/resources/

Step 3

Unzip downloaded package into the newly created MDB folder

Step 4

Install all dependencies

        
            
            npm i --save-dev @popperjs/core detect-autofill chart.js chartjs-plugin-datalabels deepmerge perfect-scrollbar @originjs/vite-plugin-commonjs sass
          
        
    

Import MDB

Create mdb.scss in my-project/resources/css and mdb.js in my-project/resources/js. Then import MDB in those files:

Note: if you decide to import only specified scss modules, please remember that _variables.scss must be always imported and if component has a mixin file, it's also neccesary to import it.

        
            
            // import compiled MDB styles
            @import '../mdb/css/mdb.min.css';
            
            // import styles from src

            // MDB PRO Essential
            @import '../mdb/src/scss/mdb.pro.scss'

            // MDB PRO Advanced
            @import '../mdb/src/mdb/scss/mdb.pro.scss'
          
        
    
        
            
            // import compiled package
            import * as mdb from "../mdb/js/mdb.min.js";

            window.mdb = mdb.default;
            
            // import js from src

            // MDB PRO Essential
            import * as mdb from "../mdb/src/js/mdb.pro";
            
            window.mdb = mdb;

            // MDB PRO Advanced
            import * as mdb from "../mdb/src/mdb/js/mdb.pro";
            
            window.mdb = mdb;
          
        
    

Now your directory should look like this:

        
          my-project/
          ├── resources/
          │   ├── mdb/
          │   │   ├── scss/
          │   │   ├── js/
          │   │   └── src/
          │   │
          │   ├── css/
          │   │   ├── app.css 
          │   │   └── mdb.scss
          │   ├── js/
          │   │    ├── bootstrap.js
          │   │    ├── app.js 
          │   │    └── mdb.js
          │   └── views/
          │       └── welcome.blade.php
        (...)
        
      

With MDB Package imported in my-project/resources, you need to configure Vite to import them.

Open vite.config.js and append path to newly created mdb.scss and mdb.js.

        
            
        import { defineConfig } from "vite";
        import { viteCommonjs } from "@originjs/vite-plugin-commonjs";
        import laravel from "laravel-vite-plugin";

        export default defineConfig({
            plugins: [
                viteCommonjs(),
                laravel({
                    input: [
                        "resources/css/app.css",
                        "resources/js/app.js",
                        "resources/css/mdb.scss",
                        "resources/js/mdb.js",
                    ],
                    refresh: true,
                }),
            ],
        });
      
        
    

CDN

CDN grants the easiest way to add MDB UI KIT to your project. Just copy the latest compiled JS script tag and CSS link tag from cdnjs to the application.

Here is an example code:

Note: Only MDB Free can be added this way.

CSS

        
            
          <!-- Font Awesome -->
          <link
            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
            rel="stylesheet"
          />
          <!-- Google Fonts -->
          <link
            href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
            rel="stylesheet"
          />
          <!-- MDB -->
          <link
            href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/6.0.0/mdb.min.css"
            rel="stylesheet"
          />
        
        
    

JS

        
            
          <!-- MDB -->
          <script
            type="text/javascript"
            src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/6.0.0/mdb.min.js">
          </script>
        
        
    

Configure project

Note: There is no need to configure vite this way if you have chosen CDN installation.

With MDB Package imported in my-project/resources, you need to configure Vite and set path to MDB files.

Open vite.config.js and append path to newly created mdb.scss and mdb.js and include viteCommonjs plugin:

        
            
        import { defineConfig } from "vite";
        import laravel from "laravel-vite-plugin";

        export default defineConfig({
            plugins: [
                viteCommonjs(),
                laravel({
                    input: [
                        "resources/css/app.css",
                        "resources/js/app.js",
                        "resources/css/mdb.scss",
                        "resources/js/mdb.js",
                    ],
                    refresh: true,
                }),
            ],
        });
      
        
    

After that we can link resources inside the main PHP file - welcome.blade.php.
Since we have this file opened, let's also add font-awesome. Without it icons couldn't be displayed.

        
            
        <head>
          <!-- Font Awesome -->
          <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
          />
          @vite('resources/css/mdb.scss')
        </head>
        <body>
          @vite(['resources/js/mdb.js'])
        </body>
      
        
    

Edit package.json to allow running dev server with a single command.

        
            
        "scripts": {
            "dev": "vite",
            "build": "vite build",
            "start": "concurrently --kill-others \"php artisan serve\" \"vite\""
        },
      
        
    

Run app

Finally, we can start our app. From the my-project folder run:

        
            
      npm run start