4

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 ;-)

Zekura
  • 317
  • 4
  • 13

1 Answers1

2

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.

natral
  • 986
  • 1
  • 18
  • 42
  • on the side: if you're like me, coming from "we, the JS framework, will do all the scaffolding for you" world and new to laravel: make sure you add styles and scripts to blade templates! `` `` BTW, currently I am registering components one-per-one basis, in `resources/js/app.js`, like so: `Vue.component('mdb-input', require('mdbvue/src/components/Input'));` Isn't there a more elegant, less repetive way? Great answer, @natral! – Jakub Strebeyko Dec 14 '18 at 12:15
  • 1
    If you are trying to compile SASS, then in `/resources/sass/app.scss` why not use SASS instead of CSS? @import "~mdbvue/build/scss/mdb" – Karl Hill Dec 24 '18 at 20:31
  • Did you find a more elegant way to register all of the components at once, @JakubStrebeyko? I know just enough about vue to wonder if it's me or the mdbvue package that's giving me fits. :/ – shark Mar 08 '19 at 16:43
  • >Everything that is mentioned in the best answer is correct, but doing tests in a view of functions js are not enabled while not exporting jquery and mdb in the view in my case in the file home.blade.php ``` > > ``` >I hope someone will give you this information – Alfredo Jesus Teran Guzman May 14 '19 at 19:14
  • Module build failed (from ./node_modules/css-loader/index.js) – Azamat Apr 29 '20 at 09:01