[Vuejs]-How to load mdboostrap with laravel?

by

0👍

please follow this steps from this answer https://github.com/mdbootstrap/Vue-Bootstrap-with-Material-Design/issues/1#issuecomment-372342369 :

insert this in your main.js file: 

import 'mdbvue/build/css/mdb.css'
import 'mdbvue/src/components/Waves.css'

then in your component import the components that you need:

import { Container, Row, Column, Btn, Card } from 'mdbvue';

for example:

<template>
   <mdb-btn-fixed @mouseenter.native="hover" @mouseleave.native="hoverOut" 
      icon="pencil" size="lg" :bottom="30" :right="25">
       <mdb-btn-fixed-item :show="show" color="red" icon="star"/>
       <mdb-btn-fixed-item :show="show" color="yellow" icon="user"/>
       <mdb-btn-fixed-item :show="show" color="green" icon="envelope"/>
       <mdb-btn-fixed-item :show="show" color="blue" icon="shopping-cart"/>
   </mdb-btn-fixed>
</template>
<script>
import { mdbBtn, mdbBtnFixed, mdbBtnFixedItem } from 'mdbvue';

export default {
  data() {
    return {
        show: false
    };
  },
  name: 'ButtonPage',
  components: {
    mdbBtn,
    mdbBtnFixed,
    mdbBtnFixedItem
  },
};

You have a lot of examples of usage here at the bottom: https://mdbootstrap.com/docs/vue/components/buttons/

Leave a comment