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:
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:
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