Topic: <view-wrapper> unknown component

GuillaumeDgr premium asked 2 years ago


Expected behavior I'm trying to use "Contact Form intro" template from documentation (Sections/Intros). (I have pro licence for MdbVue)

Actual behavior Error in console :

Unknown custom element: view-wrapper - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Resources (screenshots, code snippets etc.) Template code is exactly same as doc. Component is registered :

import { ViewWrapper } from 'mdbvue'; export default { name: "Header", components: { ViewWrapper }, };

Magdalena Dembna staff answered 2 years ago


It seems that this example in our documentation needs updating - below I'm sending the corrected code:

<template>
  <div>
    <header>
      <!--Navbar-->
      <mdb-navbar style="margin-top: 50px; padding-top: 20px;" :color="'primary'" position="top" dark href="#" transparent scrolling>
        <mdb-container>
          <mdbNavbarBrand href="#"><strong>MDB</strong></mdbNavbarBrand>
          <mdb-navbar-toggler style="max-width: 1140px">
            <mdb-navbar-nav left>
              <mdb-nav-item href="#" waves-fixed active>Home</mdb-nav-item>
              <mdb-nav-item href="#" waves-fixed>Link</mdb-nav-item>
              <mdb-nav-item href="#" waves-fixed>Profile</mdb-nav-item>
            </mdb-navbar-nav>
            <!--Search form -->
            <form>
              <mdb-input type="text" class="text-white f-flex" placeholder="Search" aria-label="Search" label navInput waves waves-fixed/>
            </form>
            <!--/.Search form -->
          </mdb-navbar-toggler>
        </mdb-container>
      </mdb-navbar>
      <!--/.Navbar-->

      <!--mdbView-->
      <mdb-view>
        <mdb-mask overlay="indigo-strong" class="d-flex justify-content-center align-items-center">
          <mdb-container>
              <!--Grid row-->
              <mdb-row class="pt-lg-5 mt-lg-5">
                <!--Grid column-->
                <mdb-col md="6" class="mb-5 mt-md-0 mt-5 white-text text-center text-md-left animated fadeInLeft">
                  <h1 class="display-4 font-weight-bold ">Lorem ipsum</h1>
                  <hr class="hr-light">
                  <h6 class="mb-3 ">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem repellendus quasi fuga
                  nesciunt dolorum nulla magnam veniam sapiente, fugiat! Commodi sequi non animi ea
                  dolor molestiae, quisquam iste.</h6>
                  <mdb-btn outline="white">Learn more</mdb-btn>
                </mdb-col>
                <!--Grid column-->
                <!--Grid column-->
                <mdb-col md="6" xl="5" class="mb-4 animated fadeInRight">
                  <!--Form-->
                  <mdb-card>
                    <mdb-card-body class="z-depth-2">
                      <!--Header-->
                      <div class="text-center">
                        <h3 class="dark-grey-text">
                          <strong>Write to us:</strong>
                        </h3>
                        <hr>
                      </div>
                      <!--Body-->
                      <div class="md-form">
                      <!--Input with icon prefix-->
                        <mdb-input type="text" icon="user" iconClass="grey-text" label="Your name" id="form-name"/>
                        <mdb-input type="text" icon="envelope" iconClass="grey-text" label="Your mail" id="form-email"/>
                        <!--Textarea with icon prefix-->
                        <mdb-textarea icon="pencil-alt" iconClass="grey-text" label="Your message" id="form-text" :rows="3"/>
                      </div>
                      <div class="text-center mt-3">
                        <mdb-btn color="indigo">Send</mdb-btn>
                        <hr>
                        <fieldset class="form-check">
                          <mdb-input type="checkbox" label="Subscribe me to the newsletter" id="form-subscribe" inline/>
                        </fieldset>
                      </div>
                    </mdb-card-body>
                  </mdb-card>
                  <!--/.Form-->
                </mdb-col>
                <!--Grid column-->
              </mdb-row>
              <!--Grid row-->
          </mdb-container>
        </mdb-mask>
      </mdb-view>
      <!--/.mdbView-->
    </header>

    <main>
      <mdb-container>
        <mdb-row class="py-5">
          <mdb-col md="12" class="text-center">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
        </mdb-col>
        </mdb-row>
      </mdb-container>
    </main>
  </div>
</template>

<script>
import { mdbNavbar, mdbNavbarToggler, mdbNavbarNav, mdbNavItem, mdbInput, mdbTextarea, mdbView, mdbMask, mdbRow, mdbCol, mdbContainer, mdbBtn, mdbCard, mdbCardBody, mdbNavbarBrand } from 'mdbvue';

export default {
  name: 'ContactFormPage',
  components: {
    mdbNavbar,
    mdbNavbarToggler,
    mdbNavbarNav,
    mdbNavItem,
    mdbInput,
    mdbTextarea,
    mdbView,
    mdbMask,
    mdbRow,
    mdbCol,
    mdbContainer,
    mdbBtn,
    mdbCard,
    mdbCardBody,
    mdbNavbarBrand
  }
};
</script>

<style scoped>
.navbar {
  transition: 1s;
}
.navbar .md-form {
  margin: 0;
}
.top-nav-collapse {
    background-color: #39448c !important;
}
@media (max-width: 990px){
  .navbar {
    background-color: #424f95 !important;
  }
}
.view {
  background-image: url(https://mdbootstrap.com/img/Photos/Others/images/89.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  height: calc(100vh - 60px);
  margin-top: -10px;
}
h6 {
    line-height: 1.7;
}
</style>

Best regards, Magdalena



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: Premium
  • Premium support: Yes
  • Technology: MDB Vue
  • MDB Version: 6.7.1
  • Device: Mac book pro
  • Browser: Firefox developers
  • OS: MacOs
  • Provided sample code: No
  • Provided link: No