Integrating MDBvue with Laravel

Topic: Integrating MDBvue with Laravel

natral free asked 6 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.

Add comment

Jakub Strebeyko staff answered 6 years ago

0 0 Best answer

Please insert min. 20 characters.

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

Add comment

Mikołaj Smoleński staff answered 5 years ago

1 0 Best answer

Please insert min. 20 characters.

Hi Arat,

Please follow the instructions:

MDBVUE LARAVEL HOW-TO:

Go into your project's root directory;
$ yarn add -D babel-preset-stage-2
in yourappname/resources/js/app.js add import 'mdbvue/build/css/mdb.css';
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
$ yarn dev it will compile both css and vue code into the output files we attached above
$ 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?

Add comment

mydancebay priority answered 5 years ago

0 1 Best answer

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

Add comment

Write

Create snippet

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

natral

5Support score
1Questions 0Answers 0Snippets