vue component can not refer to himself in the vueify dev environment

[cnweibo]

Hi,
I have followed the example of nesting tree component http://vuejs.org/examples/tree-view.html with vueify dev manner.
Unfortunately, vuejs always complain

vue.common.js:1014[Vue warn]: Unknown custom element: <item> - did you mean <item>? HTML is case-insensitive, remember to use kebab-case in template

How to let the recurs tree item component be accessible within component itself?
Here is the item.vue file for the component defination

<template>
    <!-- item.vue -->
    <li class="v-catetree">
        <div
          :class="{bold: isFolder}"
          @click="toggle"
          @dblclick="changeType">
          {{model.name}}
          <span v-if="isFolder">[{{open ? '-' : '+'}}]</span>
        </div>
        <ul v-show="open" v-if="isFolder">
          <item
            class="item"
            v-for="model in model.children"
            :model="model">
          </item>
          <li @click="addChild">+</li>
        </ul>
    </li>
</template>
<script>
    /* item.vue */
    import Item from './item.vue';
    export default {
        props: ['model'],
        data: function () {
        return {
          open: false
        }
        },
        components: { Item },
        computed: {
        isFolder: function () {
          return this.model.children &&
            this.model.children.length
        }
        },
        methods: {
        toggle: function () {
          if (this.isFolder) {
            this.open = !this.open
          }
        },
        changeType: function () {
          if (!this.isFolder) {
            Vue.set(this.model, 'children', [])
            this.addChild()
            this.open = true
          }
        },
        addChild: function () {
          this.model.children.push({
            name: 'new stuff'
          })
        }
        }
    };
</script>

In the root vue instance init:

// browserify entry point
var Vue = require('vue');
Vue.use(require('vue-resource'));
import Alerts from './components/Alerts.vue';
import Item from './components/pages/admincates/item.vue';
var data = {
  name: 'My Tree',
  children: [
    { name: 'hello' },
    { name: 'wat' },
    {
      name: 'child folder',
      children: [
        {
          name: 'child folder',
          children: [
            { name: 'hello' },
            { name: 'wat' }
          ]
        },
        { name: 'hello' },
        { name: 'wat' },
        {
          name: 'child folder',
          children: [
            { name: 'hello' },
            { name: 'wat' }
          ]
        }
      ]
    }
  ]
};
new Vue({
    el: '#body',
    components: { Alerts, Item},
    data: {
        alerts: [],
        treeData: data
    },
    methods: {
        addEvent: function(){
            this.$root.$broadcast('add-alert',{info: "new alert added by click",type:"error"});
        }
    }
});

in the root html:

<ul id="treeroot">
  <catetree
    class="item"
    :model="treeData">
  </catetree>
</ul>

[phanan]

To use recursive components like this, you should register them globally. See Recursive Component.

[cnweibo]

thanks, you are hero for quickly explain and close the issue, it is first time i see github refresh itselft when you close this issue!

[simplesmiler]

I will add another note to the @phanan answer. You don't have to register components globally. Instead a component can have a name, and then Vue will shortcut this name to the component itself:

module.exports = {
  name: 'item',
  template: '<div><item v-if="needToGoDeeper"></item></div>',
  data: function() {
    needToGoDeeper: Math.random() > 0.5,
  },
};

[duydb]

thanks @simplesmiler, it work for me 😍