Topic: Integrating MDBvue with Laravel

natral free asked 5 years ago


I've been trying to integrate MDB vue version into a Laravel 5.7 project and tried following the quick start guide to install as a dependency (in an existing project) but when I try to use a component following the examples like so
<template>
    <card>
        <card-img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%286%29.jpg" alt="Card image cap"></card-img>
        <card-body>
            <card-title>Basic card</card-title>
            <card-text>Some quick example text to build on the card title and make up the bulk of the card's content.</card-text>
            <btn color="primary">Button</btn>
        </card-body>
    </card>
</template>

<script>

    import { Card, CardImg, CardBody, CardTitle, CardText, Btn } from 'mdbvue';

    export default {
        name: 'test',
        components: {
            Card,
            CardImg,
            CardBody,
            CardTitle,
            CardText,
            Btn
        }
    };

</script>
then I add the component to my app.js file using
Vue.component('test', require('./components/test.vue'));
Next I do npm run watch script and I get numerous errors (exceeding the scroll capacity of my console) saying...
ERROR in ./node_modules/babel-loader/lib?{"cacheDirectory":true,"presets":[["env",{"modules":false,"targets":{"browsers":["> 2%"],"uglify":true}}]],"plugins":["transform-object-rest-spread",["transform-runtime",{"polyfill":false,"helpers":false}]]}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./node_modules/mdbvue/src/components/CardUp.vue
Module build failed: Error: Couldn't find preset "stage-2" relative to directory "/var/www/my-site/node_modules/mdbvue"
    at /var/www/my-site/node_modules/babel-core/lib/transformation/file/options/option-manager.js:293:19
    at Array.map (<anonymous>)
    at OptionManager.resolvePresets (/var/www/my-site/node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
    at OptionManager.mergePresets (/var/www/my-site/node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10)
    at OptionManager.mergeOptions (/var/www/my-site/node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14)
    at OptionManager.init (/var/www/my-site/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
    at File.initOptions (/var/www/my-site/node_modules/babel-core/lib/transformation/file/index.js:212:65)
    at new File (/var/www/my-site/node_modules/babel-core/lib/transformation/file/index.js:135:24)
    at Pipeline.transform (/var/www/my-site/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
    at transpile (/var/www/my-site/node_modules/babel-loader/lib/index.js:50:20)
    at /var/www/my-site/node_modules/babel-loader/lib/fs-cache.js:118:18
    at ReadFileContext.callback (/var/www/my-site/node_modules/babel-loader/lib/fs-cache.js:31:21)
    at FSReqWrap.readFileAfterOpen [as oncomplete] (fs.js:420:13)
 @ ./node_modules/mdbvue/src/components/CardUp.vue 8:21-346
 @ ./node_modules/mdbvue/src/index.js
 @ ./node_modules/babel-loader/lib?{"cacheDirectory":true,"presets":[["env",{"modules":false,"targets":{"browsers":["> 2%"],"uglify":true}}]],"plugins":["transform-object-rest-spread",["transform-runtime",{"polyfill":false,"helpers":false}]]}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./resources/js/components/test.vue
 @ ./resources/js/components/test.vue
 @ ./resources/js/app.js
 @ multi ./resources/js/app.js ./resources/sass/app.scss

  Is there a step that I'm skipping or something here? Would greatly appreciate any assistance.

Jakub Strebeyko staff answered 5 years ago


Hi, The error message seems to regard lack of babel stage-2 preset inside the mdbvue dependency. Have you tried installing it?
npm install --save-dev babel-preset-stage-2
Note, that it is strange - following the guide should leave you off with a properly installed module (with all the sub-dependencies installed, too). We weren't able to get the same error message just by installing it the package as a dependency. Please let us know either way about your setup and whether the unelegant solution worked - it might get us on the right track! Best, Kuba

Mikołaj Smoleński staff answered 5 years ago


Hi Arat,

Please follow the instructions:

MDBVUE LARAVEL HOW-TO:

  1. Go into your project's root directory;
  2. $ yarn add -D babel-preset-stage-2
  3. in yourappname/resources/js/app.js add import 'mdbvue/build/css/mdb.css';
  4. enhance a chosen blade template (default: "yourappname/resources/views/welcome.blade.php") with a) id="app" this is where our Vue instance will be mounted b) in the head so that the default BS styles can get attached c) in, say, lower part of the body so that our js goodies actually get there
  5. $ yarn dev it will compile both css and vue code into the output files we attached above
  6. $ php artisan serve now we should have a php server running (by default at localhost: 8000)

Best regards


Jack Lyons free commented 5 years ago

Does it have to be id="app" or can we choose the ID name? If so, are there any extra steps to take to make this change? I don't want to physically change the 'el' to 'app' because that would break any future upgrades wouldn't it?


mydancebay priority answered 5 years ago


Hi! I have Laravel 5.7 too and Vue with TypeScript syntax. How I can integrate MDB Vue? I tried same for Navbar, imported all components, but it works not fine ( Thanks!!!


Mikołaj Smoleński staff commented 5 years ago

Did You try to import our components without 'mdb' prefix?

Best regards



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

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: 4.6.0
  • Device: any
  • Browser: any
  • OS: Ubuntu 16.04
  • Provided sample code: Yes
  • Provided link: Yes