Topic: Building single vue component

ilya premium asked 4 months ago


Hi, I would like to use MDB Vue components as it is specified in the documentation. Unfortunately, there is no MDBSelect component in the prebuilt mdb.umd.min.js. Therefore, I would like to build just MDBSelect component by myself. Could you please guide me on how to do this?

In the end, I would like my application code to look like this:

<html lang="en">
  <body>
    <div id="app">
      <mdb-select v-model:options="fruits"/>
    </div>


    <script src="https://unpkg.com/vue@next"></script>

    <!-- How to build the mdbselect.js? -->
    <script src="mdbselect.js"></script>
    <script>
      const App = {
        components: {
          mdbSelect: mdb.MDBSelect,
        },
        data() {
          return {
            fruits: ["Apple", "Banana", "Orange"]
          };
        }
      };
      Vue.createApp(App).mount("#app");
    </script>
  </body>
</html>

Bartosz Cylwik staff answered 4 months ago


Hi, cdn only provides components from the free package. If you would like to use pro components, please follow instructions from this guide:

https://mdbootstrap.com/docs/vue/pro/installation/

If you would like to create a package from our source code with use of a bundler (for example vite) you can check this discussion

https://mdbootstrap.com/support/vue/how-to-use-vue-components-instead-of-d-ts-to-make-custom-build-of-mdb-vue-ui-kit-pro-advanced/

At the very bottom there will be step by step guide on how to do it.


jammerxd2 priority commented 4 months ago

For typescript - this is based on the advice from the thread Bartosz linked

https://mdbootstrap.com/support/vue/mdbvue-better-typescript-support/


ilya premium commented 4 months ago

Thanks for your help! Trying to build it myself I found the assembled umd version of MDBVue Pro in the gitlab repo and that is enough for me.



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: Premium
  • Premium support: Yes
  • Technology: MDB Vue
  • MDB Version: MDB5 4.1.1
  • Device: Laptop
  • Browser: Firefox
  • OS: Arch Linux
  • Provided sample code: Yes
  • Provided link: Yes