4

I'm currently using webpack with vuejs 2. I have a very basic component [Main.vue] that is rendered by vue-router and inside this component, I want to have another one [Information.vue]. For some reason, I can't render it properly.

components/test/Information.vue

<template>
    <div>
    TEST
    </div>
</template>

<script>
export default {
  name: 'information',
  props: {
    bleh: {
      type: Object,
      required: true
    }
  }
}
</script>

components/test/injex.js

export { default as Main } from './Main'
export { default as Information } from './Information'

components/test/Main.vue

<template>
    <information :bleh="{}" />
</template>

<script>
import { Information } from 'components/test'
export default {
  name: 'main',
  components: { Information  }
}
</script>

Any idea why I get the following error ?

[Vue warn]: Unknown custom element: <information> - did you register
the component correctly? For recursive components, make sure to
provide the "name" option
Gabriel Robert
  • 3,012
  • 2
  • 18
  • 36
  • Is `Information` what you think it is? Do you see a vue component on `console.log(Information)` right after `import { Information } from 'components/test'`? – Amresh Venugopal Apr 12 '17 at 19:59
  • @AmreshVenugopal Yes, I can console.log the component and actually see props. Also, doing this make the render possible. If I do not console.log(Information), the error is thrown. – Gabriel Robert Apr 12 '17 at 20:08
  • 1
    You should do - import { information } from 'components/test' – Pradeepb Apr 13 '17 at 22:06

2 Answers2

4

This is really old question but answering so that future visitors might get help:

Custom element shouldn't be self closed:

<information :bleh="{}" />

Make sure to use like this:

<information :bleh="{}"></information>

Thanks to @connexo for the comment:

Also for compliance with official web components, make sure you use a dashed tag like <information-component ...></information-component>

For those who get error with the following:

Did you register the component correctly?

Make sure to apply the name option in your component

Bhojendra Rauniyar
  • 83,432
  • 35
  • 168
  • 231
0

Try register component directly. I fixed my one by this.

Vue.component('Information', Information)
m yadav
  • 1,783
  • 2
  • 11
  • 13