[FIXED] How to load mdbootstrap vue into Laravel 5 with laravel-mix?

Issue

I am trying to install mdbootstrap vue into a Laravel 5.6 project, but i realy don't understand how i suppose to do it.

If somebody can give me a little tutorial, it would be nice of you ;-)

Solution

Try this(updated)...

(Assuming you have already installed laravel)

Go to your project directory and do:

npm install --save mdbvue

You will also need:

npm install --save-dev babel-preset-stage-2

next go to resources/js/bootstrap.js and under the require('bootstrap'); add require('mdbvue'); it should look something like this:

/**
 * We'll load jQuery and the Bootstrap jQuery plugin which provides support
 * for JavaScript based Bootstrap features such as modals and tabs. This
 * code may be modified to fit the specific needs of your application.
 */

try {
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');
    require('mdbvue'); //<---this is what you need to add
} catch (e) {}

Next go to resources/sass/app.scss and add the MDB css under the bootstrap import, you might also need to import the font-awesome css:

// Material Design Bootstrap
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
@import '~bootstrap/scss/bootstrap';
@import "~mdbvue/build/css/mdb.css";

Now to compile your app.css and app.js files just do npm run dev

With this everything should be up and running and you are free to use MDBvue components or simply use MDB jQuery version.

This worked for me on a Laravel 5.7 project. Hope this helps.

Answered By - natral

Answer Checked By - Candace Johnson (PHPFixing Volunteer)