my package.json

{
  "name": "vite-electron-builder",
  "private": true,
  "engines": {
    "node": ">=v16.13",
    "npm": ">=8.1"
  },
  "main": "packages/main/dist/index.cjs",
  "scripts": {
    "build": "npm run build:main && npm run build:preload && npm run build:renderer",
    "build:main": "cd ./packages/main && vite build",
    "build:preload": "cd ./packages/preload && vite build",
    "build:preload:types": "dts-cb -i \"packages/preload/tsconfig.json\" -o \"packages/preload/exposedInMainWorld.d.ts\"",
    "build:renderer": "cd ./packages/renderer && vite build",
    "compile": "cross-env MODE=production npm run build && electron-builder build --config .electron-builder.config.js --dir --config.asar=false",
    "test": "npm run test:main && npm run test:preload && npm run test:renderer && npm run test:e2e",
    "test:e2e": "npm run build && vitest run",
    "test:main": "vitest run -r packages/main --passWithNoTests",
    "test:preload": "vitest run -r packages/preload --passWithNoTests",
    "test:renderer": "vitest run -r packages/renderer --passWithNoTests",
    "watch": "node scripts/watch.js",
    "lint": "eslint . --ext js,ts,vue",
    "typecheck:main": "tsc --noEmit -p packages/main/tsconfig.json",
    "typecheck:preload": "tsc --noEmit -p packages/preload/tsconfig.json",
    "typecheck:renderer": "npm run build:preload:types && vue-tsc --noEmit -p packages/renderer/tsconfig.json",
    "typecheck": "npm run typecheck:main && npm run typecheck:preload && npm run typecheck:renderer"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "5.10.1",
    "@typescript-eslint/parser": "^5.10.1",
    "@vitejs/plugin-vue": "2.1.0",
    "@vue/test-utils": "2.0.0-rc.18",
    "cross-env": "7.0.3",
    "dts-for-context-bridge": "0.7.1",
    "electron": "16.0.8",
    "electron-builder": "22.14.5",
    "electron-devtools-installer": "3.2.0",
    "eslint": "8.8.0",
    "eslint-plugin-vue": "8.4.0",
    "happy-dom": "2.30.1",
    "nano-staged": "0.5.0",
    "playwright": "1.18.1",
    "simple-git-hooks": "2.7.0",
    "typescript": "^4.5.5",
    "vite": "2.7.13",
    "vitest": "0.2.5",
    "vue-tsc": "0.31.1"
  },
  "dependencies": {
    "electron-updater": "4.6.5",
    "mdb-vue-ui-kit": "^1.9.0",
    "vue": "3.2.29"
  }
}

I noticed that if you write the full path, it disappears. But it's inconvenient to write the full path to each item. Help
// import { MDBBtn } from 'mdb-vue-ui-kit/src/components/free/components/MDBBtn';

Although the dependancy is said to be installed on the web console/ dependencies section,
the file cannot be found in Node_Modules of Vue.js (am using Visual Studio Code)

thus, I can't do the importing or anything, e.g. : this code section.

import { animateOnScroll } from "mdbvue";

  export default {
    name: "AnimationsPage",
    directives: {
      animateOnScroll
    }
  }

since I can't do the importing, due to mdbvue cannot be found. then that's mean there is a problem.

will be great if I can receive some guidance, am a newbie.

It is possible to use Vue + Bootstrap without node.js and npm, just include vue.js, bootstrap-vue.js, bootstrap.min.css, bootstrap-vue.css, polyfill.min.js in a html file (See bootstrap-vue docs). And, Vue Material and Vuetify (also Material Design theme based on Vue.js) can work without npm.

Is it possible to use Vue-Bootstrap-with-Material-Design without node.js and npm?

The following lines are mentioning (this.)repsonsive instead of responsive.
This will (as far as i saw) lead to the responsiveMd and responsiveSm options not working.

https://github.com/mdbootstrap/Vue-Bootstrap-with-Material-Design/blob/73b25a8efcc8298edd473e3f188bd8c32d34fe53/src/components/Datatable.vue#L320

https://github.com/mdbootstrap/Vue-Bootstrap-with-Material-Design/blob/73b25a8efcc8298edd473e3f188bd8c32d34fe53/src/components/Datatable.vue#L321

Hope this is the right place for this issue and hope it helps.

I've recently started working with the npm version of mdb-vue (free). When trying to embed into an app I couldn't get it to work. After some debugging it seems like the mdbvue.umd.min.js.map is missing from the npm package. Contradictory it's provided by the featured/ recommended CDNs such as cdn.jsdelivr.net.

The file seems also not to be defined in the /lib folder of this repository.

Have I missed some building step? I added the mdb package with vue add mdb. Help is really appreciated. Thanks in advance

In Carousel API
in api reference the touch directive is used to add mobile touch events to carousel.
But when i try to use it
<mdb-multi-carousel slide> this results in
[Vue warn]: Failed to resolve directive: touch

There are two modal in a template, we call they modalA and modalB, and there are two value visibleA and visibleB to control the two modal visible
when I click a button to set visibleA = true, then the modalA show.
then click another button(in modalA body) to set visibleB = true, then the modalB show too.
but when I click the blank zone, which is outside the modalB, the two modal are both close.
I want that just modalB close, how to realize it, thanks.

I've followed the Vue 5 min quick start at https://mdbootstrap.com/docs/vue/getting-started/quick-start/ and I was no able to add to an existing Vue project. Followed the steps but after adding a "mdb-btn" it does not render properly.

Thanks in advance.

Trying to get the Toggle Button Group example from https://mdbootstrap.com/docs/vue/forms/radio/ to work. But only getting

[Vue warn]: Component MDBRadio is missing template or render function.

in the server console.

Successfully used other elements such as buttons and tables so I think my general setup should be OK.

Edit: Using the latest version but tried a couple of earlier 4.x and 3.x versions without luck.

Issue in the title.
Simple example:

<template>
    <div>
        <MDBBtn color="primary" @click="modal = true">Open</MDBBtn>
        <MDBModal v-model="modal" >
            <MDBModalHeader>
                <MDBModalTitle>Test Modal</MDBModalTitle>
            </MDBModalHeader>
            <MDBModalBody>
                ...
            </MDBModalBody>
            <MDBModalFooter>
                <MDBBtn color="primary" @click="modal = false">Close</MDBBtn>
            </MDBModalFooter>
        </MDBModal>
    </div>
</template>

<script setup>
import {
    MDBModal,
    MDBModalHeader,
    MDBModalTitle,
    MDBModalBody,
    MDBModalFooter,
    MDBBtn,
} from "mdb-vue-ui-kit";
</script>

<script>
export default {
    data() {
        return {
            modal: true,
        };
    },
};
</script>

I was excited to come across your CSS vue material framework. However, it is disappointing that I cannot run your examples located here: https://mdbootstrap.com/vue/components/forms/ because MdInput.vue is not your package.

This is the snipped of my import code:

import {MdInput} from 'mdbvue'
export default {
  name: 'HelloWorld',
  components:{
    MdInput
  }

Is there something am doing wrong here?

Font Awesome isn't the only icon library out there. Just as Bootstrap is no longer dependent on any icon library, MDBootstrap shouldn't depend on any specific icon library.

Not to mention, the dependency is out-of-date. Font Awesome is on version 5.2 now, with SVG icons in addition to an icon font.

Removing the dependency means one less thing to keep track of.

In the Navbar component's mounted method, this.collapse is set to this.$el.children.navbarSupportedContent. This is too explicit and brittle. What if the NavbarCollapse component is not a direct child of the Navbar, then this.collapse will be undefined.

Since ids are meant to be unique on a page, a simple document.getElementById('navbarSupportedContent') is much better. The target prop already provides a way to specify the collapse id, but it needs to be changed to not require the "#" prefix.

hi, is it compatible with nuxt 3?

Hello there,

<mdb-input type="text" v-model="someModel.property" />
If I change the someModel.property programatically the input never updates itself.

Is there a workaround?

Thanks!

Using the steps from this post: all work except popovers and tooltips.

<mdb-tooltip trigger="hover" :options="{placement: 'top'}">
        <span slot="tip">This will totally remove all your orders </span>
         <mdb-btn v-if="!isCartEmpty" @click.native="emptyCart">
Empty cart</mdb-btn>
</mdb-tooltip>

I get this happening n the browser:

The browser console shows this:

vendors.app.js:23110 error TypeError: Cannot read property '0' of undefined
    at VueComponent.mounted (vendors.app.js:35499)
    at invokeWithErrorHandling (commons.app.js:12255)
    at callHook (commons.app.js:14609)
    at Object.insert (commons.app.js:13538)
    at invokeInsertHook (commons.app.js:16732)
    at VueComponent.patch [as __patch__] (commons.app.js:16951)
    at VueComponent.Vue._update (commons.app.js:14338)
    at VueComponent.updateComponent (commons.app.js:14450)
    at Watcher.get (commons.app.js:14869)
    at Watcher.run (commons.app.js:14944)
value @ vendors.app.js:23110

is there a dependency that I'm missing. Modals work fine BTW.
Thanks in advance.

It doesn't appear that there is a formatting option for datatables. Displaying a number like 250000 isn't very attractive. It would be nice to be able to use a formatter on the column and use something like numeral to make the number output as something more visually appealing. I believe at the moment you would have to change the data source to convert the number to a string and then load the data into the datatable.

Something like this maybe...

columns: [
      {
        label: 'ID',
        field: 'organizationId',
        sort: 'asc'
      },
      {
        label: 'Name',
        field: 'name',
        sort: 'asc'
      },
      {
        label: 'Daily Records',
        field: 'maxRecordsDaily',
        formatter: function (val) {
          return numeral(val).format('0,0')
        }
      },
    ]

As stated in the docs there should clearly be a NavbarItemDropdown Component.

<navbar class="indigo" name="Navbar" href="#"> 
  <navbar-collapse> 
    <navbar-nav> 
      <navbar-item href="#" :active="true">Home</navbar-item> 
      <navbar-item href="#">Features</navbar-item> 
      <navbar-item href="#">Pricing</navbar-item> 
      <navbar-item-dropdown label="Dropdown"> 
        <a class="dropdown-item" href="#">Action</a> 
        <a class="dropdown-item" href="#">Another action</a> 
        <a class="dropdown-item" href="#">Something else here</a> 
      </navbar-item-dropdown> 
    </navbar-nav> 
    <form class="form-inline"> 
      <input class="form-control mr-auto p-2" type="text" placeholder="Search" aria-label="Search"> 
    </form> 
  </navbar-collapse> 
</navbar>

Official stable release NOR master contains this component.

This dependency was not found:

* @/components/NavbarItemDropdown in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0&bustCache!./src/App.vue

And another good example why its important to package this up properly Referencing Issue #1

I'm getting a console warning from AutoPrefixer.
autoprefixer: Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated.

It looks like it's currently used here and here.

It looks like this is an upstream issue in Bootstrap which should be fixed soon.

NUXT: nuxtjs.org
Hope will have NUXT-CLI
Refer to this project: https://github.com/vuetifyjs/nuxt

The carousel component's leftIcon and rightIcon properties do not apply when the carousel is not in multi-item mode.

my code:

<mdb-carousel :items="banners" :interval="5000" slide touch controlls leftIcon="paper-plane" rightIcon="paper-plane" > </mdb-carousel>

Hi there!

I'm trying to edit the source components myself, but seeing as the package.json doesn't include any build instructions or dependencies required, importing from mdb-vue-ui-kit/src/index.free isn't possible thus modifications to the .vue components aren't possible.

How can I make my own version of mdb-vue that includes features and changes to components I want to see?

Additionally, trying to compile in typescript for a build results in errors in the following files (when importing from src/index.free):

     4  ......src/components/free/components/MDBAccordionItem.vue:73
     1  ......src/components/free/components/MDBBtn.vue:21
     2  ......src/components/free/components/MDBCard.vue:14
     2  ......src/components/free/components/MDBCardBody.vue:14
    11  ......src/components/free/components/MDBCarousel.vue:66
    20  ......src/components/free/components/MDBCollapse.vue:3
    11  ......src/components/free/components/MDBDropdown.vue:21
     2  ......src/components/free/components/MDBDropdownItem.vue:2
    14  ......src/components/free/components/MDBDropdownMenu.vue:57
     2  ......src/components/free/components/MDBDropdownToggle.vue:72
     5  ......src/components/free/components/MDBModal.vue:3
    13  ......src/components/free/components/MDBPopover.vue:45
     4  ......src/components/free/components/MDBTooltip.vue:38
     1  ......src/components/free/forms/MDBFile.vue:27
    15  ......src/components/free/forms/MDBInput.vue:234
     5  ......src/components/free/forms/MDBTextarea.vue:215
     2  ......src/components/free/layout/MDBRow.vue:14
     2  ......src/components/free/navigation/MDBFooter.vue:14
     5  ......src/components/free/navigation/MDBNavbar.vue:114
     1  ......src/components/free/navigation/MDBNavbarItem.vue:26
     4  ......src/components/free/navigation/MDBTabItem.vue:54
     1  ......src/components/free/navigation/MDBTabNav.vue:44
     7  ......src/components/free/navigation/MDBTabPane.vue:4
    14  ......src/components/free/navigation/MDBTabs.vue:38

Thanks in advance!

What about nuxt version?
prosimy ;)

Bootstrap-Vue isn't used anywhere in the code. If the idea was to delegate some things to Bootstrap-Vue, that's not a bad idea; e.g., layout components.

Hi,

I'm using MDBVue with SCSS

Am I wrong or is the _alert.scss missing in the lib/scss/free/ folder?

<mdb-alert color="info">alert content</mdb-alert>

My alerts are using the default bootstrap-css-only colors instead of the MDB core color variables.

On phones is really tiny, all the components. it's just a fresh installation

I tried it on a phone and is also like that. You can't read the text.

Hi! I'm impressed with your idea to integrate Vue and Bootstrap. But I also like working with Nuxt and TypeScript. Is there any way to integrate your Bt components into other templates, such as Nuxt Typescript Starter Template ?

Hey,

I'm trying to load a local image in carousel like this

<carousel-item :class="{active: show[0]}" img src="../assets/plane.jpg" mask="black-light" alt="First slide">
    <carousel-caption title="Light mask"></carousel-caption>
</carousel-item>

And it doesn't load, but using <img> tag with same path in same component loads the image.

from this example with Other JSON structures

mounted(){
fetch('https://jsonplaceholder.typicode.com/todos')
.then(res => res.json())
.then(json => {
let keys = ["id", "title", "completed"];
let entries = this.filterData(json, keys);
//columns
this.columns = keys.map(key => {
return {
label: key.toUpperCase(),
field: key,
sort: 'asc'
};
});
//rows
entries.map(entry => this.rows.push(entry));
})
.catch(err => console.log(err));
}

is it possible to custom label of column like

columns: [
{
label: 'Name',
field: 'name',
sort: 'asc'
},
{
label: 'Position',
field: 'position',
sort: 'asc'
},

I’m looking forward to your reply.

hi, is it compatible with nuxt3js?

After buying mdb pro it seems to be an unachievable task to install it.

GitLab account was created, but cant be accessed. "You have to confirm your email address"... I have not received anythink similar.
After posting in official mdbootstrap forums it kinda seems like my ip or whatever got banned. ´Cause after klicking "post" i am not able to enter anything on mdbootstrap.com/*... Tried this on 2 machines and 2 ips..

Hi,

click event in Button component did not work. For the click event, you attach the 'waves' method and it is not possible to handle the standard event for the button. Below is my idea how to solve it.

<template>
  <button :is="tag" :class="[className, {'ripple-parent': waves}]" :type="type" :role="role" @click="handleClick">
    <slot></slot>
  </button>
</template>

and then in 'methods' property:

  methods: {
    handleClick(e) {
      this.wave(e);
      this.$emit('click');
    }
  }

This solution will allow to handle an event in the component in a standard way:

<Btn size="sm" role="button" @click="myClickMethod">Click!</Btn>

when use a modal on pc, it can be close by click the blank outside the modal,
but on mobile, it can not be close by tap the black zone.

Any chance this will be migrated into a package ?

As in be able to include a collection of Vue components that use mdboostrap as a dependency enabling us to stay up to date on the latest components ?

Right now you are advertising this as a UI Kit but, really its just a vue template with prebuilt mdboostrap Vue components. This doesn't help us if we just want to utilize the components in our own Vue Template

I would suggest to pull out all of the UI Components and mixins etc ... (basically everything outside of the vue template) and package that up into something like mdboostrap-vue.

Then in this template, you simply add that mdbootstrap-vue to your dependencies.

This will allow users to either use your template (which can still get package updates) or use their preferred template and can simply npm install mdboostrap-vue --save. Which would also install all the dependencies that is needed for that package (mdboostrap, boostrap-4.0, etc ...)

https://github.com/mdbootstrap/Vue-Bootstrap-with-Material-Design/blob/2db649f22b7248bb082405ef99d1e287c3ae1335/src/components/Tables/Datatable.vue#L507

Hello, I am gettting the following error -> [Vue warn]: Error in callback for watcher "rows": "TypeError: this.filterArray is not a function"

It seems that filterArray isn't defined anywhere

Hello,

In all your components, you are specifying :is="tag" which causes some refresh issues with md-input (for example, I didn't test with all components).

For example, I am doing some kind-of todo list : https://codesandbox.io/s/mmyw0rmlvy

With the :is attribute, the newValue = "" is not respected and the input is not cleared when i click on Add:

From what I can tell in the documentation for the is attribute: https://vuejs.org/v2/api/#is
It is used when an element name is invalid inside another element. For example, if my custom element is a custom <tr>, I can't do that, because it is not valid in HTML:

<table>
  <custom-element></custom-element>
</table>

So instead, I must do that:

<table>
  <tr is="custom-element"></tr>
</table>

See also: https://vuejs.org/v2/guide/components.html#DOM-Template-Parsing-Caveats

Note that this limitation does not apply for single-file vue components.

Is there any reason why you are using is here?
Can you remove them so we can use md-input?

Thanks,

Hi,

When I try to deploy your package to Herkoku, I'm facing the application error. The build has been succeed while Deploy the package. But It throws application error while view the site.

What is the configuration that I'm missig? Because When I try to run in local, I can see that deafult page.

Can you help me out Plzzz?

using navbar in mobile like below image show
when tap the hamburger icon, the navbar menu open,
then tap the menu(may be the 'css')
the page navigate the right page, but the navbar menu can not auto close. you should tap the hamburger icon again.