Unknown Custom Element - mdbvue - Material Design for Bootstrap

Topic: Unknown Custom Element - mdbvue

Deepak Balaji free asked 6 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 6 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

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>

<span class="token tag"><span class="token punctuation"><</span>script<span class="token punctuation">></span></span><span class="token script language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> MdInput <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'mdbvue'</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  name<span class="token punctuation">:</span> <span class="token string">'InputsProPage'</span><span class="token punctuation">,</span>
  components<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    MdInput
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span><span class="token tag"><span class="token punctuation"></</span>script<span class="token punctuation">></span></span>

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