Topic: [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the \"name\" option.

rscs priority asked 4 years ago


Does not make sense that this doesn't work ...  
<template>
  <section>
  <mdb-input
    type="radio"
    id="isSpotlightYes"
    name="isSpotlight"
    value="1"
    label="Show these properties in the Explore section"
  />
  </section>
</template>

<script>
import {mdbInput} from 'mdbvue';

export default {
  components: {
    mdbInput,
  },
  name: "PropertyList",
}
</script>

<style scoped>
</style>

Mikołaj Smoleński staff answered 3 years ago


Hello,

The code is correct. You have to buy PRO license to use that component.

Best regards


Mauro Pérez Araya free answered 3 years ago


ERROR:

webpack-internal:///4:629 [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in ---> at src/App.vue

Apologies my english. In my main.js:

import Vue from 'vue'
import 'bootstrap-css-only/css/bootstrap.min.css';
import 'mdbvue/build/css/mdb.css';
import App from './App.vue'

And App.vue:

<template>
  <mdb-container class="green-text">
    <div class="deep-purple-skin">
      <mdb-side-nav logo="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" sideNavClass="sn-bg-4" mask="strong" :OpenedFromOutside.sync="toggleA" hidden waves>
        <ul>
          <li>
            <ul class="social">
            <li><a href="#" class="icons-sm fb-ic"><mdb-icon fab icon="facebook" /></a></li>
            <li><a href="#" class="icons-sm pin-ic"><mdb-icon fab icon="pinterest" /></a></li>
            <li><a href="#" class="icons-sm gplus-ic"><mdb-icon fab icon="google-plus" /></a></li>
            <li><a href="#" class="icons-sm tw-ic"><mdb-icon fab icon="twitter" /></a></li>
            </ul>
          </li>
          <li>
            <form class="search-form" role="search">
              <div class="form-group md-form mt-0 pt-1 ripple-parent" @click="wave">
                <input type="text" class="form-control" placeholder="Search">
              </div>
            </form>
          </li>
          <li>
            <mdb-side-nav-nav>
              <mdb-side-nav-cat name="Submit blog" icon="chevron-right">
                <mdb-side-nav-item href="#">Submit listing</mdb-side-nav-item>
                <mdb-side-nav-item href="#">Registration form</mdb-side-nav-item>
              </mdb-side-nav-cat>
              <mdb-side-nav-cat name="Instruction" icon="hand-pointer-o">
                <mdb-side-nav-item href="#">For bloggers</mdb-side-nav-item>
                <mdb-side-nav-item href="#">For authors</mdb-side-nav-item>
              </mdb-side-nav-cat>
              <mdb-side-nav-cat name="About" icon="eye">
                <mdb-side-nav-item href="#">Introduction</mdb-side-nav-item>
                <mdb-side-nav-item href="#">Monthly meetings</mdb-side-nav-item>
              </mdb-side-nav-cat>
              <mdb-side-nav-cat name="Contact me" icon="envelope-o">
                <mdb-side-nav-item href="#">FAQ</mdb-side-nav-item>
                <mdb-side-nav-item href="#">Write a message</mdb-side-nav-item>
              </mdb-side-nav-cat>
              <mdb-side-nav-item header icon="envelope" href="#">Write a message</mdb-side-nav-item>
              <mdb-side-nav-item header icon="user" href="#">Profile</mdb-side-nav-item>
            </mdb-side-nav-nav>
          </li>
        </ul>
      </mdb-side-nav>
    </div>
    <div class="text-center icon-div">
      <mdb-icon icon="bars" size="5x" @click.native="toggleLeftSideNav"/>
    </div>
  </mdb-container>
</template>

<script>
  import { mdbSideNav, mdbSideNavNav, mdbSideNavCat, mdbSideNavItem, mdbContainer, mdbIcon, waves} from 'mdbvue';
  export default {
    name: 'App',
    components: {
      mdbSideNav,
      mdbSideNavNav,
      mdbSideNavCat,
      mdbSideNavItem,
      mdbContainer,
      mdbIcon
    },
    data(){
      return {
        toggleA: false,
        waves: true
      };
    },
    methods: {
      toggleLeftSideNav() {
        this.toggleA = !this.toggleA;
      }
    },
    mixins: [waves]
  }
</script>
<style scoped>
  .container {
    height: 750px;
  }
  .icon-div {
    width: 49%;
    display: inline-block;
  }
  .icon-div .fa {
    cursor: pointer;
  }
</style>

Mikołaj Smoleński staff answered 4 years ago


Have You updated MDB Vue to the latest version? Component name 'mdb-input' was added in one of the last releases. Best Regards

Matt Rademacher free answered 4 years ago


Same problem, I am using the card component with no problems. Installed like this:
npm install mdbvue

Mauro Pérez Araya free commented 3 years ago

I have the same problem


Mikołaj Smoleński staff commented 3 years ago

Could You please share Your code with us? I recommend also to create a new issue with this case.


Mauro Pérez Araya free commented 3 years ago

Comment it below with the code


Mikołaj Smoleński staff answered 4 years ago


Hi there, Your code is correct. How did You install the MDB Vue package? Best Regards

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

  • User: Priority
  • Premium support: Yes
  • Technology: MDB Vue
  • MDB Version: 4.6.0
  • Device: Desktop
  • Browser: Firefox
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No