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

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?

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.

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.

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.

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.

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

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!

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'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

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.