Unknown Custom Element - mdbvue - Material Design for Bootstrap

Topic: Unknown Custom Element - mdbvue

Deepak Balaji free asked 5 years ago

Hi! I'm using the free version of mdbvue. I'm creating a vue-cli app and followed the installation instructions. But when I try to access the mdbvue components, I'm getting the following Error

[Vue warn]: Unknown custom element: <Container> - did you register the component correctly? For recursive components, make sure to provide the "name" option. found in ---> <ProfileFirst> at src/components/ProfileFirst.vue <App> at src/App.vue <Root>

I did

npm install --save mdbvue

My main.js

import Vue from 'vue'

import Firebase from 'firebase'
import VueFire from 'vuefire'
import 'bootstrap/dist/css/bootstrap.css'
import 'mdbvue/build/css/mdb.css'
import { Container, Row, Column, Btn, Card, CardBody, CardHeader, CardImg } from 'mdbvue';

import App from './App'
import router from './router'

Vue.config.productionTip = false

Vue.use(VueFire)

let app;

Firebase.auth().onAuthStateChanged(function(user){
if(!app){
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
}
})

My Component

<template lang="html">
<div class="profileFirst">
<Container>
</Container>
</div>
</template>

<script>

import Firebase from 'firebase'
import {db} from '../firebase'

import { Container, Row, Column, Btn, Card, CardBody, CardHeader, CardImg } from 'mdbvue';

export default {
name: 'profileFirst',
data: function(){
return{
}
},
created: function(){
this.user = Firebase.auth().currentUser;
},
methods: {
}
}
</script>

<style lang="css">
</style>

Can you tell me where I'm going wrong???

Add comment

Anna Morawska staff answered 5 years ago

1 0 Best answer

Hi there,

to properly register our components, you have to add components property in your export, as shown below.
<pre class="grey lighten-3 px-3 mb-0 line-numbers language-html"><code class=" language-html"><template>
 <MdInput type="checkbox" id="checkbox1" label="Material unchecked" />
</template>

export default {
 name: 'InputsProPage',
 components: {
 MdInput
 }
}
</script></code></pre>
It should fix the problem.

Best,

Ania

Please insert min. 20 characters.

Hi there, to properly register our components, you have to add components property in your export, as shown below.

<template>
  <MdInput type="checkbox" id="checkbox1" label="Material unchecked" />
</template>

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

export default {
  name: 'InputsProPage',
  components: {
    MdInput
  }
}
</script>

It should fix the problem. Best, Ania

Deepak Balaji free commented 5 years ago

Thank you very much for the clarification!!! This wasn't very clear in the documentation...

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB Vue
MDB Version: 4.5.1
Device: Laptop
Browser: Firefox Nightly 63.0a1
OS: KDE Neon
Provided sample code: Yes
Provided link: No

Deepak Balaji

2Support score
1Questions 0Answers 0Snippets